From 129c030df3e0fc992a4340b449acb82c9da86719 Mon Sep 17 00:00:00 2001 From: Dominic Farolino <domfarolino@gmail.com> Date: Wed, 28 Feb 2024 11:19:44 -0500 Subject: [PATCH 01/14] First stab at post-insertion steps --- dom.bs | 71 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 69 insertions(+), 2 deletions(-) diff --git a/dom.bs b/dom.bs index 3e4c85cba..86572f32c 100644 --- a/dom.bs +++ b/dom.bs @@ -2645,12 +2645,69 @@ of a <var>node</var> into a <var>parent</var> before a <var>child</var>, run the <p><a lt="Other applicable specifications">Specifications</a> may define <dfn export id=concept-node-insert-ext>insertion steps</dfn> for all or some <a for=/>nodes</a>. The -algorithm is passed <var ignore>insertedNode</var>, as indicated in the <a for=/>insert</a> -algorithm below. +algorithm is passed <var>insertedNode</var>, as indicated in the <a for=/>insert</a> algorithm +below. These steps must not modify the <a>node tree</a> that <var>insertedNode</var> +<a>participates</a> in, create <a for=/>browsing contexts</a>, <a lt="fire an event">fire +events</a>, or otherwise execute JavaScript. + +<div class=example id=example-foo-what-do-i-put-here> + <p>While the <a>insertion steps</a> cannot execute JavaScript (among other things), it is expected + that they will indeed have script-observable consequences. Consider the below example: + + <pre class=lang-javascript><code> + const h1 = document.querySelector('h1'); + + const fragment = new DocumentFragment(); + const script = fragment.appendChild(document.createElement('script')); + const style = fragment.appendChild(document.createElement('style')); + + script.innerText= 'console.log(getComputedStyle(h1).color)'; // Prints 'rgb(255, 0, 0)' + style.innerText = 'h1 {color: rgb(255, 0, 0);}'; + + document.body.append(fragment); + </code></pre> + + <p>The script in the above example prints <code class=lang-javascript>'rgb(255, 0, 0)'</code> + because the following happen in order: + + <ol> + <li> + <p>The <a for=/>insert</a> algorithm runs, which will insert the <{script}> and <code><a element + spec=HTML>style</a></code> elements in order. + + <ol> + <li>The HTML Standard's <a>insertion steps</a> run for the <{script}> element; they do nothing. + [[!HTML]] + + <li>The HTML Standard's <a>insertion steps</a> run for the <code><a element + spec=HTML>style</a></code> element; they immediately apply its style rules to the document. + [[!HTML]] + + <li>The HTML Standard's <a>post-insertion steps</a> run for the <{script}> element; they run + the script, which immediately observes the style rules that were applied in the above step. + [[!HTML]] + </ol> + </li> + </ol> +</div> + <!-- See https://github.com/whatwg/dom/issues/34#issuecomment-125571750 for why we might need to adjust this further based on the requirements of the script element. There might be other ways to define that though as Olli suggests, so leaving that out for now. --> +<p><a lt="Other applicable specifications">Specifications</a> may also define <dfn export +id=concept-node-post-insert-ext>post-insertion steps</dfn> for all or some <a for=/>nodes</a>. The +algorithm is passed <var ignore>insertedNode</var>, as indicated in the <a +for=/>insert</a> algorithm below. + +<p class=note>The purpose of the <a>post-insertion steps</a> is to provide an opportunity for <a +for=/>nodes</a> to perform any insertion-related operations that modify the <a>node tree</a> that +<var ignore>insertedNode</var> <a>participates</a> in, create <a for=/>browsing contexts</a>, or +otherwise execute JavaScript. These steps allow all nodes that will be inserted by a given <a +for=/>insert</a> operation to by inserted <i>atomically</i>, with all major side effects occurring +<i>after</i> <a>node tree</a> insertion is complete. + + <p><a lt="other applicable specifications">Specifications</a> may define <dfn export id=concept-node-children-changed-ext>children changed steps</dfn> for all or some <a for=/>nodes</a>. The algorithm is passed no argument and is called from <a for=/>insert</a>, @@ -2752,6 +2809,16 @@ before a <var>child</var>, with an optional <i>suppress observers flag</i>, run <var>parent</var> with <var>nodes</var>, « », <var>previousSibling</var>, and <var>child</var>. <li><p>Run the <a>children changed steps</a> for <var>parent</var>. + + <li> + <p>For each <var>node</var> in <var>nodes</var>, in <a>tree order</a>: + + <ol> + <li><p>For each <a>shadow-including inclusive descendant</a> <var>inclusiveDescendant</var> of + <var>node</var>, in <a>shadow-including tree order</a>, run the <a>post-insertion steps</a> with + <var>inclusiveDescendant</var>. + </ol> + </li> </ol> From 0ceca2654b94ec8e78df1b9cc1f472861fe8e563 Mon Sep 17 00:00:00 2001 From: Dominic Farolino <domfarolino@gmail.com> Date: Thu, 29 Feb 2024 16:45:40 -0500 Subject: [PATCH 02/14] Fixes/review comments --- dom.bs | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/dom.bs b/dom.bs index 86572f32c..eebe4a994 100644 --- a/dom.bs +++ b/dom.bs @@ -2648,7 +2648,8 @@ of a <var>node</var> into a <var>parent</var> before a <var>child</var>, run the algorithm is passed <var>insertedNode</var>, as indicated in the <a for=/>insert</a> algorithm below. These steps must not modify the <a>node tree</a> that <var>insertedNode</var> <a>participates</a> in, create <a for=/>browsing contexts</a>, <a lt="fire an event">fire -events</a>, or otherwise execute JavaScript. +events</a>, or otherwise execute JavaScript. These steps may [=queue a global task|queue tasks=] to +do these things asynchronously, however. <div class=example id=example-foo-what-do-i-put-here> <p>While the <a>insertion steps</a> cannot execute JavaScript (among other things), it is expected @@ -2703,9 +2704,10 @@ for=/>insert</a> algorithm below. <p class=note>The purpose of the <a>post-insertion steps</a> is to provide an opportunity for <a for=/>nodes</a> to perform any insertion-related operations that modify the <a>node tree</a> that <var ignore>insertedNode</var> <a>participates</a> in, create <a for=/>browsing contexts</a>, or -otherwise execute JavaScript. These steps allow all nodes that will be inserted by a given <a -for=/>insert</a> operation to by inserted <i>atomically</i>, with all major side effects occurring -<i>after</i> <a>node tree</a> insertion is complete. +otherwise execute JavaScript. These steps allow a batch of <a>nodes</a> to be <a for=/>inserted</a> +<i>atomically</i> with respect to script, with all major side effects occurring <i>after</i> the +batch insertions into the <a>node tree</a> is complete, but before <a lt="notify mutation +observers"><code>MutationObserver</code>s are notified</a>. <p><a lt="other applicable specifications">Specifications</a> may define From 164eae9b4bc2ea64a8a7426d6ac82e55c9904639 Mon Sep 17 00:00:00 2001 From: Dominic Farolino <domfarolino@gmail.com> Date: Mon, 4 Mar 2024 14:34:04 -0500 Subject: [PATCH 03/14] Elaborate on atomicity --- dom.bs | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/dom.bs b/dom.bs index eebe4a994..3221e02e6 100644 --- a/dom.bs +++ b/dom.bs @@ -2707,7 +2707,8 @@ for=/>nodes</a> to perform any insertion-related operations that modify the <a>n otherwise execute JavaScript. These steps allow a batch of <a>nodes</a> to be <a for=/>inserted</a> <i>atomically</i> with respect to script, with all major side effects occurring <i>after</i> the batch insertions into the <a>node tree</a> is complete, but before <a lt="notify mutation -observers"><code>MutationObserver</code>s are notified</a>. +observers"><code>MutationObserver</code>s are notified</a>. This ensures that all pending <a>node +tree</a> insertions completely finish before more insertions can occurr. <p><a lt="other applicable specifications">Specifications</a> may define From 2c9f769dc168ba1e815b02bf41249d52d34b891f Mon Sep 17 00:00:00 2001 From: Dominic Farolino <domfarolino@gmail.com> Date: Wed, 3 Apr 2024 23:05:05 -0400 Subject: [PATCH 04/14] Address annevk review --- dom.bs | 40 ++++++++++++++++++++-------------------- 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/dom.bs b/dom.bs index 3221e02e6..5f293155a 100644 --- a/dom.bs +++ b/dom.bs @@ -2652,8 +2652,8 @@ events</a>, or otherwise execute JavaScript. These steps may [=queue a global ta do these things asynchronously, however. <div class=example id=example-foo-what-do-i-put-here> - <p>While the <a>insertion steps</a> cannot execute JavaScript (among other things), it is expected - that they will indeed have script-observable consequences. Consider the below example: + <p>While the <a>insertion steps</a> cannot execute JavaScript (among other things), they will + indeed have script-observable consequences. Consider the below example: <pre class=lang-javascript><code> const h1 = document.querySelector('h1'); @@ -2706,9 +2706,8 @@ for=/>nodes</a> to perform any insertion-related operations that modify the <a>n <var ignore>insertedNode</var> <a>participates</a> in, create <a for=/>browsing contexts</a>, or otherwise execute JavaScript. These steps allow a batch of <a>nodes</a> to be <a for=/>inserted</a> <i>atomically</i> with respect to script, with all major side effects occurring <i>after</i> the -batch insertions into the <a>node tree</a> is complete, but before <a lt="notify mutation -observers"><code>MutationObserver</code>s are notified</a>. This ensures that all pending <a>node -tree</a> insertions completely finish before more insertions can occurr. +batch insertions into the <a>node tree</a> is complete. This ensures that all pending <a>node +tree</a> insertions completely finish before more insertions can occur. <p><a lt="other applicable specifications">Specifications</a> may define @@ -2784,25 +2783,26 @@ before a <var>child</var>, with an optional <i>suppress observers flag</i>, run <p>For each <a>shadow-including inclusive descendant</a> <var>inclusiveDescendant</var> of <var>node</var>, in <a>shadow-including tree order</a>: - <ol> - <li><p>Run the <a>insertion steps</a> with <var>inclusiveDescendant</var>. + <ol> + <li><p>Run the <a>insertion steps</a> with <var>inclusiveDescendant</var>. - <li> - <p>If <var>inclusiveDescendant</var> is <a>connected</a>, then: + <li> + <p>If <var>inclusiveDescendant</var> is <a>connected</a>, then: - <ol> - <li><p>If <var>inclusiveDescendant</var> is <a for=Element>custom</a>, then - <a>enqueue a custom element callback reaction</a> with <var>inclusiveDescendant</var>, - callback name "<code>connectedCallback</code>", and an empty argument list. + <ol> + <li><p>If <var>inclusiveDescendant</var> is <a for=Element>custom</a>, then + <a>enqueue a custom element callback reaction</a> with <var>inclusiveDescendant</var>, + callback name "<code>connectedCallback</code>", and an empty argument list. - <li> - <p>Otherwise, <a lt="try to upgrade an element">try to upgrade</a> - <var>inclusiveDescendant</var>. + <li> + <p>Otherwise, <a lt="try to upgrade an element">try to upgrade</a> + <var>inclusiveDescendant</var>. - <p class=note>If this successfully upgrades <var>inclusiveDescendant</var>, its - <code>connectedCallback</code> will be enqueued automatically during the - <a>upgrade an element</a> algorithm. - </ol> + <p class=note>If this successfully upgrades <var>inclusiveDescendant</var>, its + <code>connectedCallback</code> will be enqueued automatically during the + <a>upgrade an element</a> algorithm. + </ol> + </p> </li> </ol> </li> From 6d3838d56d67119a9321efa86853520530b3129d Mon Sep 17 00:00:00 2001 From: Dominic Farolino <domfarolino@gmail.com> Date: Thu, 4 Apr 2024 09:31:22 -0400 Subject: [PATCH 05/14] Fix indenting --- dom.bs | 31 +++++++++++++++---------------- 1 file changed, 15 insertions(+), 16 deletions(-) diff --git a/dom.bs b/dom.bs index 5f293155a..2d3314561 100644 --- a/dom.bs +++ b/dom.bs @@ -2783,26 +2783,25 @@ before a <var>child</var>, with an optional <i>suppress observers flag</i>, run <p>For each <a>shadow-including inclusive descendant</a> <var>inclusiveDescendant</var> of <var>node</var>, in <a>shadow-including tree order</a>: - <ol> - <li><p>Run the <a>insertion steps</a> with <var>inclusiveDescendant</var>. + <ol> + <li><p>Run the <a>insertion steps</a> with <var>inclusiveDescendant</var>. - <li> - <p>If <var>inclusiveDescendant</var> is <a>connected</a>, then: + <li> + <p>If <var>inclusiveDescendant</var> is <a>connected</a>, then: - <ol> - <li><p>If <var>inclusiveDescendant</var> is <a for=Element>custom</a>, then - <a>enqueue a custom element callback reaction</a> with <var>inclusiveDescendant</var>, - callback name "<code>connectedCallback</code>", and an empty argument list. + <ol> + <li><p>If <var>inclusiveDescendant</var> is <a for=Element>custom</a>, then + <a>enqueue a custom element callback reaction</a> with <var>inclusiveDescendant</var>, + callback name "<code>connectedCallback</code>", and an empty argument list. - <li> - <p>Otherwise, <a lt="try to upgrade an element">try to upgrade</a> - <var>inclusiveDescendant</var>. + <li> + <p>Otherwise, <a lt="try to upgrade an element">try to upgrade</a> + <var>inclusiveDescendant</var>. - <p class=note>If this successfully upgrades <var>inclusiveDescendant</var>, its - <code>connectedCallback</code> will be enqueued automatically during the - <a>upgrade an element</a> algorithm. - </ol> - </p> + <p class=note>If this successfully upgrades <var>inclusiveDescendant</var>, its + <code>connectedCallback</code> will be enqueued automatically during the + <a>upgrade an element</a> algorithm. + </ol> </li> </ol> </li> From 2ffb2de1d109ce54837df37d938ca58c5358abff Mon Sep 17 00:00:00 2001 From: Dominic Farolino <domfarolino@gmail.com> Date: Thu, 4 Apr 2024 09:33:02 -0400 Subject: [PATCH 06/14] Fix newline --- dom.bs | 1 - 1 file changed, 1 deletion(-) diff --git a/dom.bs b/dom.bs index 2d3314561..3460893de 100644 --- a/dom.bs +++ b/dom.bs @@ -2709,7 +2709,6 @@ otherwise execute JavaScript. These steps allow a batch of <a>nodes</a> to be <a batch insertions into the <a>node tree</a> is complete. This ensures that all pending <a>node tree</a> insertions completely finish before more insertions can occur. - <p><a lt="other applicable specifications">Specifications</a> may define <dfn export id=concept-node-children-changed-ext>children changed steps</dfn> for all or some <a for=/>nodes</a>. The algorithm is passed no argument and is called from <a for=/>insert</a>, From 48d1ee55814514120b5bbc543109647895de5b0c Mon Sep 17 00:00:00 2001 From: Dominic Farolino <domfarolino@gmail.com> Date: Thu, 4 Apr 2024 10:21:49 -0400 Subject: [PATCH 07/14] Fix indentation for real --- dom.bs | 32 ++++++++++++++++---------------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/dom.bs b/dom.bs index 3460893de..d3432b353 100644 --- a/dom.bs +++ b/dom.bs @@ -2671,25 +2671,25 @@ do these things asynchronously, however. <p>The script in the above example prints <code class=lang-javascript>'rgb(255, 0, 0)'</code> because the following happen in order: - <ol> - <li> - <p>The <a for=/>insert</a> algorithm runs, which will insert the <{script}> and <code><a element - spec=HTML>style</a></code> elements in order. + <ol> + <li> + <p>The <a for=/>insert</a> algorithm runs, which will insert the <{script}> and <code><a element + spec=HTML>style</a></code> elements in order. - <ol> - <li>The HTML Standard's <a>insertion steps</a> run for the <{script}> element; they do nothing. - [[!HTML]] + <ol> + <li>The HTML Standard's <a>insertion steps</a> run for the <{script}> element; they do nothing. + [[!HTML]] - <li>The HTML Standard's <a>insertion steps</a> run for the <code><a element - spec=HTML>style</a></code> element; they immediately apply its style rules to the document. - [[!HTML]] + <li>The HTML Standard's <a>insertion steps</a> run for the <code><a element + spec=HTML>style</a></code> element; they immediately apply its style rules to the document. + [[!HTML]] - <li>The HTML Standard's <a>post-insertion steps</a> run for the <{script}> element; they run - the script, which immediately observes the style rules that were applied in the above step. - [[!HTML]] - </ol> - </li> - </ol> + <li>The HTML Standard's <a>post-insertion steps</a> run for the <{script}> element; they run + the script, which immediately observes the style rules that were applied in the above step. + [[!HTML]] + </ol> + </li> + </ol> </div> <!-- See https://github.com/whatwg/dom/issues/34#issuecomment-125571750 for why we might need to From 236fe018be999eff9bef0f19b24cbd5f0fa561bc Mon Sep 17 00:00:00 2001 From: Dominic Farolino <domfarolino@gmail.com> Date: Wed, 1 May 2024 12:11:43 -0400 Subject: [PATCH 08/14] Static node list --- dom.bs | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/dom.bs b/dom.bs index d3432b353..9288b7189 100644 --- a/dom.bs +++ b/dom.bs @@ -2811,15 +2811,29 @@ before a <var>child</var>, with an optional <i>suppress observers flag</i>, run <li><p>Run the <a>children changed steps</a> for <var>parent</var>. + <li> + <p>Let <var>staticNodeList</var> be a <a for=/>list</a> of <a for=/>nodes</a>, initially + empty.</p> + + <p class="note">We collect all <a for=/>nodes</a> <i>before</i> calling the <a>post-insertion + steps</a> on any one of them, instead of calling the <a>post-insertion steps</a> <i>while</i> + we're traversing the <a>node tree</a>. This is because the <a>post-insertion steps</a> can + modify the tree's structure, making live traversal unsafe, possibly leading to the + <a>post-insertion steps</a> being called multiple times on the same <a>node</a>.</p> + </li> + <li> <p>For each <var>node</var> in <var>nodes</var>, in <a>tree order</a>: <ol> <li><p>For each <a>shadow-including inclusive descendant</a> <var>inclusiveDescendant</var> of - <var>node</var>, in <a>shadow-including tree order</a>, run the <a>post-insertion steps</a> with - <var>inclusiveDescendant</var>. + <var>node</var>, in <a>shadow-including tree order</a>, <a for=list>append</a> + <var>inclusiveDescendant</var> to <var>staticNodeList</var>. </ol> </li> + + <li><p><a for=list>For each</a> <var>node</var> in <var>staticNodeList</var>, run the + <a>post-insertion steps</a> with <var>node</var>. </ol> From b31d333e455603591e8e523963aa210ad46a9df5 Mon Sep 17 00:00:00 2001 From: Dominic Farolino <domfarolino@gmail.com> Date: Wed, 1 May 2024 12:14:34 -0400 Subject: [PATCH 09/14] Connected --- dom.bs | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/dom.bs b/dom.bs index 9288b7189..cc566a3ad 100644 --- a/dom.bs +++ b/dom.bs @@ -2832,8 +2832,8 @@ before a <var>child</var>, with an optional <i>suppress observers flag</i>, run </ol> </li> - <li><p><a for=list>For each</a> <var>node</var> in <var>staticNodeList</var>, run the - <a>post-insertion steps</a> with <var>node</var>. + <li><p><a for=list>For each</a> <var>node</var> in <var>staticNodeList</var>, if <var>node</var> is + <a>connected</a>, then run the <a>post-insertion steps</a> with <var>node</var>. </ol> From 7a06b389ab1bba8d86450a7c98339e0db5276375 Mon Sep 17 00:00:00 2001 From: Dominic Farolino <domfarolino@gmail.com> Date: Mon, 13 May 2024 10:51:54 -0400 Subject: [PATCH 10/14] Post-connection steps. Also `<i>` -> `<em>` --- dom.bs | 30 +++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/dom.bs b/dom.bs index cc566a3ad..11da98d95 100644 --- a/dom.bs +++ b/dom.bs @@ -2684,8 +2684,8 @@ do these things asynchronously, however. spec=HTML>style</a></code> element; they immediately apply its style rules to the document. [[!HTML]] - <li>The HTML Standard's <a>post-insertion steps</a> run for the <{script}> element; they run - the script, which immediately observes the style rules that were applied in the above step. + <li>The HTML Standard's <a>post-connection steps</a> run for the <{script}> element; they run the + script, which immediately observes the style rules that were applied in the above step. [[!HTML]] </ol> </li> @@ -2697,15 +2697,15 @@ do these things asynchronously, however. to define that though as Olli suggests, so leaving that out for now. --> <p><a lt="Other applicable specifications">Specifications</a> may also define <dfn export -id=concept-node-post-insert-ext>post-insertion steps</dfn> for all or some <a for=/>nodes</a>. The -algorithm is passed <var ignore>insertedNode</var>, as indicated in the <a -for=/>insert</a> algorithm below. +id=concept-node-post-connection-ext>post-connection steps</dfn> for all or some <a for=/>nodes</a>. +The algorithm is passed <var ignore>connectedNode</var>, as indicated in the <a for=/>insert</a> +algorithm below. -<p class=note>The purpose of the <a>post-insertion steps</a> is to provide an opportunity for <a -for=/>nodes</a> to perform any insertion-related operations that modify the <a>node tree</a> that -<var ignore>insertedNode</var> <a>participates</a> in, create <a for=/>browsing contexts</a>, or +<p class=note>The purpose of the <a>post-connection steps</a> is to provide an opportunity for <a +for=/>nodes</a> to perform any connection-related operations that modify the <a>node tree</a> that +<var ignore>connectedNode</var> <a>participates</a> in, create <a for=/>browsing contexts</a>, or otherwise execute JavaScript. These steps allow a batch of <a>nodes</a> to be <a for=/>inserted</a> -<i>atomically</i> with respect to script, with all major side effects occurring <i>after</i> the +<em>atomically</em> with respect to script, with all major side effects occurring <em>after</em> the batch insertions into the <a>node tree</a> is complete. This ensures that all pending <a>node tree</a> insertions completely finish before more insertions can occur. @@ -2815,11 +2815,11 @@ before a <var>child</var>, with an optional <i>suppress observers flag</i>, run <p>Let <var>staticNodeList</var> be a <a for=/>list</a> of <a for=/>nodes</a>, initially empty.</p> - <p class="note">We collect all <a for=/>nodes</a> <i>before</i> calling the <a>post-insertion - steps</a> on any one of them, instead of calling the <a>post-insertion steps</a> <i>while</i> - we're traversing the <a>node tree</a>. This is because the <a>post-insertion steps</a> can - modify the tree's structure, making live traversal unsafe, possibly leading to the - <a>post-insertion steps</a> being called multiple times on the same <a>node</a>.</p> + <p class="note">We collect all <a for=/>nodes</a> <em>before</em> calling the <a>post-connection + steps</a> on any one of them, instead of calling the <a>post-connection steps</a> <em>while</em> + we're traversing the <a>node tree</a>. This is because the <a>post-connection steps</a> can modify + the tree's structure, making live traversal unsafe, possibly leading to the <a>post-connection + steps</a> being called multiple times on the same <a>node</a>.</p> </li> <li> @@ -2833,7 +2833,7 @@ before a <var>child</var>, with an optional <i>suppress observers flag</i>, run </li> <li><p><a for=list>For each</a> <var>node</var> in <var>staticNodeList</var>, if <var>node</var> is - <a>connected</a>, then run the <a>post-insertion steps</a> with <var>node</var>. + <a>connected</a>, then run the <a>post-connection steps</a> with <var>node</var>. </ol> From ffa0b2ee207257431be3c417418464d01639e449 Mon Sep 17 00:00:00 2001 From: Dominic Farolino <domfarolino@gmail.com> Date: Fri, 31 May 2024 12:32:12 +0200 Subject: [PATCH 11/14] Address comments --- dom.bs | 30 ++++++++++++++---------------- 1 file changed, 14 insertions(+), 16 deletions(-) diff --git a/dom.bs b/dom.bs index 11da98d95..89327bb02 100644 --- a/dom.bs +++ b/dom.bs @@ -2662,30 +2662,29 @@ do these things asynchronously, however. const script = fragment.appendChild(document.createElement('script')); const style = fragment.appendChild(document.createElement('style')); - script.innerText= 'console.log(getComputedStyle(h1).color)'; // Prints 'rgb(255, 0, 0)' + script.innerText= 'console.log(getComputedStyle(h1).color)'; // Logs 'rgb(255, 0, 0)' style.innerText = 'h1 {color: rgb(255, 0, 0);}'; document.body.append(fragment); </code></pre> - <p>The script in the above example prints <code class=lang-javascript>'rgb(255, 0, 0)'</code> - because the following happen in order: + <p>The script in the above example logs <code class=lang-javascript>'rgb(255, 0, 0)'</code> because + the following happen in order: <ol> - <li> - <p>The <a for=/>insert</a> algorithm runs, which will insert the <{script}> and <code><a element - spec=HTML>style</a></code> elements in order. + <li><p>The <a for=/>insert</a> algorithm runs, which will insert the <{script}> and <code> + <a element spec=HTML>style</a></code> elements in order. <ol> - <li>The HTML Standard's <a>insertion steps</a> run for the <{script}> element; they do nothing. - [[!HTML]] + <li><p>The HTML Standard's <a>insertion steps</a> run for the <{script}> element; they do + nothing. [[!HTML]] - <li>The HTML Standard's <a>insertion steps</a> run for the <code><a element - spec=HTML>style</a></code> element; they immediately apply its style rules to the document. - [[!HTML]] + <li><p>The HTML Standard's <a>insertion steps</a> run for the <code> + <a element spec=HTML>style</a></code> element; they immediately apply its style rules to the + document. [[!HTML]] - <li>The HTML Standard's <a>post-connection steps</a> run for the <{script}> element; they run the - script, which immediately observes the style rules that were applied in the above step. + <li><p>The HTML Standard's <a>post-connection steps</a> run for the <{script}> element; they run + the script, which immediately observes the style rules that were applied in the above step. [[!HTML]] </ol> </li> @@ -2812,8 +2811,7 @@ before a <var>child</var>, with an optional <i>suppress observers flag</i>, run <li><p>Run the <a>children changed steps</a> for <var>parent</var>. <li> - <p>Let <var>staticNodeList</var> be a <a for=/>list</a> of <a for=/>nodes</a>, initially - empty.</p> + <p>Let <var>staticNodeList</var> be a <a for=/>list</a> of <a for=/>nodes</a>, initially « ».</p> <p class="note">We collect all <a for=/>nodes</a> <em>before</em> calling the <a>post-connection steps</a> on any one of them, instead of calling the <a>post-connection steps</a> <em>while</em> @@ -2832,7 +2830,7 @@ before a <var>child</var>, with an optional <i>suppress observers flag</i>, run </ol> </li> - <li><p><a for=list>For each</a> <var>node</var> in <var>staticNodeList</var>, if <var>node</var> is + <li><p><a for=list>For each</a> <var>node</var> of <var>staticNodeList</var>, if <var>node</var> is <a>connected</a>, then run the <a>post-connection steps</a> with <var>node</var>. </ol> From 7e18bc488c1eec71bb84eeabdf7f2fae320cca8a Mon Sep 17 00:00:00 2001 From: Dominic Farolino <domfarolino@gmail.com> Date: Fri, 31 May 2024 13:46:01 +0200 Subject: [PATCH 12/14] Fix phrase-level wrapping --- dom.bs | 39 ++++++++++++++++++++------------------- 1 file changed, 20 insertions(+), 19 deletions(-) diff --git a/dom.bs b/dom.bs index 89327bb02..c0dede54f 100644 --- a/dom.bs +++ b/dom.bs @@ -2647,9 +2647,9 @@ of a <var>node</var> into a <var>parent</var> before a <var>child</var>, run the <dfn export id=concept-node-insert-ext>insertion steps</dfn> for all or some <a for=/>nodes</a>. The algorithm is passed <var>insertedNode</var>, as indicated in the <a for=/>insert</a> algorithm below. These steps must not modify the <a>node tree</a> that <var>insertedNode</var> -<a>participates</a> in, create <a for=/>browsing contexts</a>, <a lt="fire an event">fire -events</a>, or otherwise execute JavaScript. These steps may [=queue a global task|queue tasks=] to -do these things asynchronously, however. +<a>participates</a> in, create <a for=/>browsing contexts</a>, +<a lt="fire an event">fire events</a>, or otherwise execute JavaScript. These steps may +[=queue a global task|queue tasks=] to do these things asynchronously, however. <div class=example id=example-foo-what-do-i-put-here> <p>While the <a>insertion steps</a> cannot execute JavaScript (among other things), they will @@ -2695,18 +2695,18 @@ do these things asynchronously, however. adjust this further based on the requirements of the script element. There might be other ways to define that though as Olli suggests, so leaving that out for now. --> -<p><a lt="Other applicable specifications">Specifications</a> may also define <dfn export -id=concept-node-post-connection-ext>post-connection steps</dfn> for all or some <a for=/>nodes</a>. -The algorithm is passed <var ignore>connectedNode</var>, as indicated in the <a for=/>insert</a> -algorithm below. +<p><a lt="Other applicable specifications">Specifications</a> may also define +<dfn export id=concept-node-post-connection-ext>post-connection steps</dfn> for all or some +<a for=/>nodes</a>. The algorithm is passed <var ignore>connectedNode</var>, as indicated in the +<a for=/>insert</a> algorithm below. -<p class=note>The purpose of the <a>post-connection steps</a> is to provide an opportunity for <a -for=/>nodes</a> to perform any connection-related operations that modify the <a>node tree</a> that -<var ignore>connectedNode</var> <a>participates</a> in, create <a for=/>browsing contexts</a>, or -otherwise execute JavaScript. These steps allow a batch of <a>nodes</a> to be <a for=/>inserted</a> -<em>atomically</em> with respect to script, with all major side effects occurring <em>after</em> the -batch insertions into the <a>node tree</a> is complete. This ensures that all pending <a>node -tree</a> insertions completely finish before more insertions can occur. +<p class=note>The purpose of the <a>post-connection steps</a> is to provide an opportunity for +<a for=/>nodes</a> to perform any connection-related operations that modify the <a>node tree</a> +that <var ignore>connectedNode</var> <a>participates</a> in, create <a for=/>browsing contexts</a>, +or otherwise execute JavaScript. These steps allow a batch of <a>nodes</a> to be +<a for=/>inserted</a> <em>atomically</em> with respect to script, with all major side effects +occurring <em>after</em> the batch insertions into the <a>node tree</a> is complete. This ensures +that all pending <a>node tree</a> insertions completely finish before more insertions can occur. <p><a lt="other applicable specifications">Specifications</a> may define <dfn export id=concept-node-children-changed-ext>children changed steps</dfn> for all or some @@ -2813,11 +2813,12 @@ before a <var>child</var>, with an optional <i>suppress observers flag</i>, run <li> <p>Let <var>staticNodeList</var> be a <a for=/>list</a> of <a for=/>nodes</a>, initially « ».</p> - <p class="note">We collect all <a for=/>nodes</a> <em>before</em> calling the <a>post-connection - steps</a> on any one of them, instead of calling the <a>post-connection steps</a> <em>while</em> - we're traversing the <a>node tree</a>. This is because the <a>post-connection steps</a> can modify - the tree's structure, making live traversal unsafe, possibly leading to the <a>post-connection - steps</a> being called multiple times on the same <a>node</a>.</p> + <p class="note">We collect all <a for=/>nodes</a> <em>before</em> calling the + <a>post-connection steps</a> on any one of them, instead of calling the + <a>post-connection steps</a> <em>while</em> we're traversing the <a>node tree</a>. This is because + the <a>post-connection steps</a> can modify the tree's structure, making live traversal unsafe, + possibly leading to the <a>post-connection steps</a> being called multiple times on the same + <a>node</a>.</p> </li> <li> From 705aa2f054cd5452132ea287072f886d2b1389e6 Mon Sep 17 00:00:00 2001 From: Dominic Farolino <domfarolino@gmail.com> Date: Fri, 31 May 2024 13:49:36 +0200 Subject: [PATCH 13/14] Remove whitespace --- dom.bs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dom.bs b/dom.bs index c0dede54f..e002855b2 100644 --- a/dom.bs +++ b/dom.bs @@ -2706,7 +2706,7 @@ that <var ignore>connectedNode</var> <a>participates</a> in, create <a for=/>bro or otherwise execute JavaScript. These steps allow a batch of <a>nodes</a> to be <a for=/>inserted</a> <em>atomically</em> with respect to script, with all major side effects occurring <em>after</em> the batch insertions into the <a>node tree</a> is complete. This ensures -that all pending <a>node tree</a> insertions completely finish before more insertions can occur. +that all pending <a>node tree</a> insertions completely finish before more insertions can occur. <p><a lt="other applicable specifications">Specifications</a> may define <dfn export id=concept-node-children-changed-ext>children changed steps</dfn> for all or some From fb21a6d9153b698e6644b739902627b9870f47d9 Mon Sep 17 00:00:00 2001 From: Dominic Farolino <domfarolino@gmail.com> Date: Mon, 3 Jun 2024 12:26:05 +0200 Subject: [PATCH 14/14] in => of --- dom.bs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dom.bs b/dom.bs index e002855b2..2b99f8854 100644 --- a/dom.bs +++ b/dom.bs @@ -2822,7 +2822,7 @@ before a <var>child</var>, with an optional <i>suppress observers flag</i>, run </li> <li> - <p>For each <var>node</var> in <var>nodes</var>, in <a>tree order</a>: + <p>For each <var>node</var> of <var>nodes</var>, in <a>tree order</a>: <ol> <li><p>For each <a>shadow-including inclusive descendant</a> <var>inclusiveDescendant</var> of