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

仕様書

挿入

構文解析器による挿入

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

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

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

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

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

挿入手順

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

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

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

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

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

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

[124] custom element のコールバック

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

文書に挿入

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

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

[8] embed と applet と frame については仕様上 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。構文解析器が挿入要素の挿入したフォーム被関連付け要素に設定されます。 初期状態では未設定です。

[30] 字句の要素の作成とフォーム所有者の再設定も参照。

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

[17] 要求は、構文解析器メタデータparser metadataを持ちます。 値は空文字列、 parser-inserted、 not-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 DocumentFragment を insert したときの副作用に関して正しい挙動に修正。