要素の挿入

要素の挿入

[2] 要素を文書に挿入 (insert an element into a document) するとは、 要素文書子孫とすることをいいます。

仕様書

挿入

構文解析器による挿入

[108] 構文解析器によって挿入される節点は、すべて構文解析器によって新たに作られたものです。 挿入の時点ではまだ一度もスクリプトからアクセスされたことがないものですし、 子孫も存在しません。属性は、挿入と同時に設定されることがありますが、 それ以外の方法で追加されたものは存在しません。

[111] ただし AAA で既存の節点から別の要素に移動することはあります。 移動対象となる節点スクリプトによって編集されているかもしれませんし、 元々スクリプトが作ったものである可能性もあります。

[109] 里親付けが発生する場合と、根要素外を構文解析器中の場合を除き、 すべての節点挿入append 先は要素です。

[110] 里親付けの場合、挿入先となるはずだった節点table 要素などだった時、そのとして挿入されるので、そのDocumentDocumentFragment のこともあります。

Document の場合、2つ目の根要素または Document 直下のテキストとなるので、 挿入は失敗して捨てられます。 (注釈里親付けの対象となりません。)

挿入手順

[102] 節点が別の節点子供として挿入されると、 挿入手順 (insertion steps) >>101 が呼び出されます。 挿入された節点自体のみならず、その影根を含む子孫についても影根を含む木順に呼び出されます。

[103] DOM Standard 上のアルゴリズムである pre-insertreplacereplace all によって呼び出されます。

[104] このフックによって次の節点が何らかの処理を行います。

[105] 仕様上明確には規定されていませんが、次の動作もこのフックのタイミングで処理されると思われます。

[106] 「※」は構文解析器による挿入かどうかで動作が異なることがあります。
[119] 多くは要素挿入に関する処理ですが、 それ以外の種類の節点の場合もあります。

[107] なお、pre-insert, replace, replace all の各操作は挿入に先立って adopt を行いますので、その中で節点の種類によっては adopting steps も実行されます。

[49] 挿入手順群とは別に、 子供達変更済手順群が実行される場合もあります。

文書に挿入

[13] 節点挿入手順により文書中となった時、 文書に挿入 (inserted into a document) されたといいます >>1

[7] 文書への挿入のタイミングで行われる要素ごとの処理も存在しています。

[8] embedappletframe については仕様上 in a Document を使って半ば宣言的に規定されていますが、 実質的に「要素の文書からの挿入」の処理に該当します。

[9] 「※」のあるものは、構文解析器による挿入か否かで動作が異なります。

[10] レンダリングの更新は、また別のタイミングで行われます。 title 要素など画布外のUIに関する更新は特に規定がありませんが、 レンダリングと同タイミングが好ましいでしょうか。 (相互運用性に直接影響しないためか規定がありません。)

[26] 「☆」のあるものは、接続された (becomes connected) 、 すなわち挿入手順群影を含む文書中となったときに実行されます >>28。 (節点の挿入に加えて、影木への挿入でも実行されます。)

[36] 「★」のあるものは、閲覧文脈接続された (becomes browsing-context connected) 、 すなわち挿入手順群閲覧文脈接続状態となったときに実行されます >>28

[31] カスタム要素の処理は、仕様書上は挿入手順群ではなく、 挿入手順群の直後に実行する別の処理として定義されています。

[11] Webブラウザーによっては、文書要素文書への挿入のタイミングで内容スクリプトが実行されるかもしれません。

構文解析による挿入

[39] 構文解析器による要素要素位置への挿入は、 次のようにしなければなりません >>38

  1. [43] キューを、新しい要素キューに設定します。
  2. [40] 関連する類似起源閲覧文脈群の単位カスタム要素反応群スタックに、要素キューpush します。
  3. [41] 要素位置挿入します。
  4. [42] 関連する類似起源閲覧文脈群の単位カスタム要素反応群スタックpop します。
  5. [44] 要素キューについてカスタム要素反応群の呼び出しをします。

[45] つまり、要素挿入の直後にカスタム要素反応群の処理が行われます。
[46] これは開いている要素のスタックへの push の前に行われます。

[15] script 要素は、 「構文解析器挿入」 ("parser inserted") フラグを持ちます >>14構文解析器挿入した script 要素に設定されます。 初期状態では未設定です >>14

[20] これは script 要素の動作に深く関与します。 script 参照。

[53] フォーム被関連付け要素は、 構文解析器挿入フラグ (parser inserted flag) を持ちます HTML Standard構文解析器挿入したフォーム被関連付け要素に設定されます。 初期状態では未設定です。

[23] スクリプトfetchオプション群構文解析器メタデータ (parser metadata) を持ちます (旧: モジュールスクリプト構文解析器状態 (parser state) を持ちます) >>24スクリプトのfetchの際に要求構文解析器メタデータとして使う値を保持するものです。 「構文解析挿入」フラグの設定された script 要素から作成されたスクリプトでは、 parser-inserted に設定されます。それ以外のスクリプトでは、 not-parser-inserted に設定されます。

[17] 要求は、構文解析器メタデータ (parser metadata) を持ちます。 値は空文字列parser-insertednot-parser-inserted のいずれかです。 初期状態では空文字列です。 >>18

[21] これは CSP の指定 unsafe-dynamic の挙動に影響します。

[32] カスタム要素挿入される場合、カスタム要素反応のスタック節点の接続コールバック実行が追加されます。 これがいつ実行されるのかは定かではありません。

関連

[6] 逆に要素が文書から削除される場合に発生する処理もあり、 挿入時と共通しているものも多くあります。

歴史

[114] 挿入手順は、 >>112 までは節点の挿入 (node is inserted) と呼ばれていました。

[116] HTML Standard は現在でも「nodes are inserted」という用語を使っていますが、 DOM Standard の「insertion steps」を参照するようになっています >>115, >>117

[3] 要素根要素が変更され、文書根要素となったとき、 文書に挿入 (inserted into a document) されたといいます >>1

[4] この定義によれば、根要素文書に挿入されて文書根要素となった時には、 根要素自身は変化していませんから、文書に挿入はされていないこととなります。 (意図通りなのかは不明です。) 他の定義との整合性を考えると、 このケースも該当すると考えるべきかもしれません。

[12] Editorial: synchronize with the DOM Standard · whatwg/html@21c6ec7 ( 版) https://github.com/whatwg/html/commit/21c6ec77594eb89b836d4872222f5916910967fd

[16] Add 'parser metadata' to requests · whatwg/fetch@bc399d5 ( 版) https://github.com/whatwg/fetch/commit/bc399d58e4dacc625857bd37671e6c1a7844e3ec

[19] Use the 'parser metadata' concept from Fetch · w3c/webappsec-csp@4793499 ( 版) https://github.com/w3c/webappsec-csp/commit/479349944cc90e1584dcade60e80d17ea1e6b56b

[22] Pass parser metadata to Fetch · whatwg/html@e6500b9 ( 版) https://github.com/whatwg/html/commit/e6500b90244376c023e7b78642dbc7b86829233f

[25] Generalize inserted/removed into/from a document algorithms · whatwg/html@8da5a18 ( 版) https://github.com/whatwg/html/commit/8da5a18b447290ffcdd6c23e268a6e75f906c684

[5] Add custom elements to HTML · whatwg/html@6e7eaa4 ( 版) https://github.com/whatwg/html/commit/6e7eaa4bd2912965fd83766f99f984f249531f3a

[27] Execute <script> in shadow trees · whatwg/html@caf203f ( 版) https://github.com/whatwg/html/commit/caf203fd4d9a5047d1ff2edad2290d53e21368ba

[29] Make forms work in shadow trees ( (annevk著, )) https://github.com/whatwg/html/commit/927fda0f305452a9c54a25d3ebf9a6ed5ae29fd3

[33] Integrate with the Referrer Policy spec, part 1 of n ( (domenic著, )) https://github.com/whatwg/html/commit/6a7318072f340ad45229df171245d70d8621c2fe

[34] Align with vocabulary changes in the DOM Standard (annevk著, ) https://github.com/whatwg/html/commit/5b9c5d5a39c38b08e5a5c9334e14804f063235b2

[35] Make <link rel="stylesheet"> work inside shadow trees (domenic著, ) https://github.com/whatwg/html/commit/43c57866c2bbc20dc0deb15a721a28cbaad2140c

[37] Process custom element connectedCallback immediately during parsing (domenic著, ) https://github.com/whatwg/html/commit/ca818ee1c8458c3b862acd00d11779294cb89eea

[47] Be more precise about removal and insertion (annevk著, ) https://github.com/whatwg/dom/commit/26faf9a74154b5d1dd3d1f8dd699404716649ae4

[48] Add child text content and its change steps (domenic著, ) https://github.com/whatwg/dom/commit/93db3408c360a958c2f1c00fbb99bf6c5d6fa5b2

[50] Make slots do nothing outside shadow trees (hayatoito著, ) https://github.com/whatwg/dom/commit/8f8c1c30c39be38480336e7fc39c1cc7b40b6a83

[51] Shadow: Specify when `slotchange` fires · Issue #447 · whatwg/dom () https://github.com/whatwg/dom/issues/447

[52] Track HTML parser form-associated elements with a flag (annevk著, ) https://github.com/whatwg/html/commit/384c30c56d6dfd26dfbd3a5024ae10e7f7134483

[54] Make integrity="" work on module scripts (domenic著, ) https://github.com/whatwg/html/commit/9275d955dcd604e959cfcc672e0c234b1b8c00db

[55] Consider hiding `nonce` content attributes. · Issue #2369 · whatwg/html () https://github.com/whatwg/html/issues/2369

[56] Replace child text content change steps (annevk, , ) https://github.com/whatwg/dom/commit/ce4c6ba5b6e8e26e9c0e6f157243df9942d8b52a

[59] >>57 >>58 DocumentFragmentinsert したときの副作用に関して正しい挙動に修正。