Re: [whatwg/dom] Introduce DOM post-connection steps (PR #1261)

@annevk commented on this pull request.



> @@ -2645,12 +2645,70 @@ 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

No wrapping in phrasing-level elements.

> +<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
+ 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)'

```suggestion
 script.innerText= 'console.log(getComputedStyle(h1).color)'; // Logs 'rgb(255, 0, 0)'
```

> + 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>

```suggestion
 <p>The script in the above example logs <code class=lang-javascript>'rgb(255, 0, 0)'</code>
```

> + 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

No wrapping in phrasing-level. Applies again below.

> + 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.

Use `<li><p>` please. Applies a couple of times.

> @@ -2752,6 +2810,30 @@ 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>Let <var>staticNodeList</var> be a <a for=/>list</a> of <a for=/>nodes</a>, initially
+  empty.</p>

```suggestion
  « ».</p>
```

> +  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>
+  <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>, <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>, if <var>node</var> is

For each X _of_ Y

-- 
Reply to this email directly or view it on GitHub:
https://github.com/whatwg/dom/pull/1261#pullrequestreview-2090119269
You are receiving this because you are subscribed to this thread.

Message ID: <whatwg/dom/pull/1261/review/2090119269@github.com>