From 8534fcf6b6c4fa1a82b42f78fe888ef931b58844 Mon Sep 17 00:00:00 2001 From: Dominic Farolino Date: Fri, 8 Mar 2024 09:20:03 -0500 Subject: [PATCH 01/14] Basics [TMP] --- source | 24 ++++++++++++++++++++---- 1 file changed, 20 insertions(+), 4 deletions(-) diff --git a/source b/source index f0f10e15d88..db8dd1e09ff 100644 --- a/source +++ b/source @@ -1762,10 +1762,13 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute or string, means that the length of the text is zero (i.e., not even containing controls or U+0020 SPACE).

-

An HTML element can have specific HTML element insertion steps defined for the - element's local name. Similarly, an HTML element - can have specific HTML element removing steps defined for the element's local name.

+

An HTML element can have specific HTML element insertion steps, HTML element + post-insertion steps, and HTML element removing steps, all defined for the + element's local name.

+ +

An HTML element can have specific defined for the + element's local name.

+

The insertion steps for the HTML Standard, given insertedNode, are defined as the following:

@@ -1796,6 +1799,18 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute node document.

+

The post-insertion steps for the HTML + Standard, given insertedNode, are defined as the following:

+ +
    +

  1. If insertedNode is an element whose namespace is the HTML namespace, and this + standard defines HTML element post-insertion + steps for insertedNode's local + name, then run the corresponding HTML element post-insertion steps given + insertedNode.

    2. +
+

The removing steps for the HTML Standard, given removedNode and oldParent, are defined as the following:

@@ -3192,6 +3207,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
  • The pre-insert, insert, append, replace, replace all, string replace all, remove, and adopt algorithms for nodes
  • The descendant concept
  • The insertion steps, +
  • The post-insertion steps, removing steps, adopting steps, and children changed steps hooks for elements
    • From 320ae421e1e30d9f82f3eca240c8a5dac669368c Mon Sep 17 00:00:00 2001 From: Dominic Farolino Date: Fri, 8 Mar 2024 14:03:38 -0500 Subject: [PATCH 02/14] Use HTML element post-insertion steps for script --- source | 104 +++++++++++++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 91 insertions(+), 13 deletions(-) diff --git a/source b/source index db8dd1e09ff..f93edf4cf39 100644 --- a/source +++ b/source @@ -3169,6 +3169,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
  • createElementNS() method
  • getElementById() method
  • getElementsByClassName() method
    • +
  • append() method
  • appendChild() method
  • cloneNode() method
  • importNode() method
    • @@ -62258,22 +62259,99 @@ o............A....e
    -

    When a script element el that is not parser-inserted - experiences one of the events listed in the following list, the user agent must - immediately prepare the script element el:

    +

    The script HTML element post-insertion steps, given + insertedNode, are:

    - +const script2 = document.createElement('script'); +script2.id = 'script2'; +script2.innerText = `console.log('script#2 running')`; + +document.body.append(script1, script2); +</script> + +

    Nothing is printed to the console in this example. By the time the HTML element + post-insertion steps run for the first script that was atomically inserted by append(), it can observe that the second script is already + connected to the DOM. It removes the second script, so that by the time its + HTML element post-insertion steps run, it is no longer connected, and + does not get prepared.

    + + + +

  • If insertedNode is marked as being parser-inserted, then + return.

    • + +

  • Prepare the script element given insertedNode.

    • + + +

    The script children changed steps are:

    + +
      +

    1. Run the script HTML element post-insertion steps, given the + script element.

      2. +
    + +
    +

    This has an interesting implication on the execution order of a script element + and any newly-inserted child script elements. Consider the following example:

    + + 
    <script id=outer-script></script>
+
+<script>
+  const outerScript = document.querySelector('#outer-script');
+
+  const start = new Text("console.log(1);");
+  const innerScript = document.createElement('script');
+  innerScript.innerText = `console.log('inner script executing')`;
+  const end = new Text("console.log(2);");
+
+  outerScript.append(start, innerScript, end);
+</script>
    + +

    By the time the second script block executes, the outer-script has + already been prepared, but beacuse it is empty, + it did not execute and therefore is not marked as already started. The atomic + insertion of the Text nodes and nested script element have the + following effects:

    + +
      +

    1. All three child nodes get atomically inserted as children of outer-script; all of their HTML element insertion steps run, + which have no observable consequences in this case.

      2. + +

    2. The outer-script's children changed steps run, which + prepares that script; because its body is now + non-empty, this executes the contents of the two Text nodes, in order.

      3. + +

    3. The script HTML element post-insertion steps finally run for + innerScript, causing its body to execute.

      4. +
    +
    + +

    The src attribute setter sets are:

    + +
      +

    1. If the previous value of the script's src content attribute was not empty, then + return.

      2. + +

    2. Run the script HTML element post-insertion steps, given the + script element.

      3. +

    To prepare the script element given a script element el:

    From 110de4310cdee28688d1464548b474abc2ecd4d2 Mon Sep 17 00:00:00 2001 From: Dominic Farolino Date: Fri, 8 Mar 2024 14:49:11 -0500 Subject: [PATCH 03/14] Remove old para --- source | 4 ---- 1 file changed, 4 deletions(-) diff --git a/source b/source index f93edf4cf39..68f7153931e 100644 --- a/source +++ b/source @@ -1766,10 +1766,6 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute post-insertion steps, and HTML element removing steps, all defined for the element's local name.

    -

    An HTML element can have specific defined for the - element's local name.

    - -

    The insertion steps for the HTML Standard, given insertedNode, are defined as the following:

    From 050d07a7a1d87136f48e2ccdf1e2383da5b9ce62 Mon Sep 17 00:00:00 2001 From: Dominic Farolino Date: Fri, 8 Mar 2024 14:51:53 -0500 Subject: [PATCH 04/14] Fix link --- source | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/source b/source index 68f7153931e..f5fbeba6807 100644 --- a/source +++ b/source @@ -3204,7 +3204,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
  • The pre-insert, insert, append, replace, replace all, string replace all, remove, and adopt algorithms for nodes
  • The descendant concept
  • The insertion steps, -
  • The post-insertion steps, +
  • The post-insertion steps, removing steps, adopting steps, and children changed steps hooks for elements
    • From 0b6755f6b6c3e62441a99a4b0ad5110d2ebb8e64 Mon Sep 17 00:00:00 2001 From: Dominic Farolino Date: Wed, 13 Mar 2024 17:48:36 -0400 Subject: [PATCH 05/14] Add log output for example --- source | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/source b/source index f5fbeba6807..d4d1b6f9a56 100644 --- a/source +++ b/source @@ -62316,6 +62316,11 @@ document.body.append(script1, script2); const end = new Text("console.log(2);"); outerScript.append(start, innerScript, end); + + // Logs: + // 1 + // 2 + // inner script executing </script>

    By the time the second script block executes, the outer-script has From d628ddbcb66a101ea71b840ff67799577e190712 Mon Sep 17 00:00:00 2001 From: Dominic Farolino Date: Sun, 5 May 2024 12:40:18 -0400 Subject: [PATCH 06/14] Link to the correct insertion steps; fix typo --- source | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/source b/source index d4d1b6f9a56..c858b70391e 100644 --- a/source +++ b/source @@ -62331,8 +62331,8 @@ document.body.append(script1, script2);

    1. All three child nodes get atomically inserted as children of outer-script; all of their HTML element insertion steps run, - which have no observable consequences in this case.

      2. + data-x="">outer-script; all of their insertion + steps run, which have no observable consequences in this case.

    2. The outer-script's children changed steps run, which prepares that script; because its body is now @@ -62343,7 +62343,7 @@ document.body.append(script1, script2);

    -

    The src attribute setter sets are:

    +

    The src attribute setter steps are:

    1. If the previous value of the script's Date: Mon, 6 May 2024 22:08:18 -0400 Subject: [PATCH 07/14] More implicit content attribute reaction --- source | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/source b/source index c858b70391e..ccea72f1c09 100644 --- a/source +++ b/source @@ -62343,7 +62343,8 @@ document.body.append(script1, script2);

    -

    The src attribute setter steps are:

    +

    When the src attribute is set, user agents must run these + steps:

    1. If the previous value of the script's Date: Wed, 8 May 2024 11:30:59 -0400 Subject: [PATCH 08/14] Address annevk@ review --- source | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/source b/source index ccea72f1c09..cfe26af0ef9 100644 --- a/source +++ b/source @@ -62263,8 +62263,8 @@ o............A....e

      If insertedNode is not connected, then return.

      -

      This can happen in the case where an earlier-inserted script removes a later-inserted - script. For example:

      +

      This can happen in the case where an earlier-inserted script removes a + later-inserted script. For instance:

      <script>
 const script1 = document.createElement('script');
@@ -62280,11 +62280,12 @@ document.body.append(script1, script2);
 </script>

      Nothing is printed to the console in this example. By the time the HTML element - post-insertion steps run for the first script that was atomically inserted by append(), it can observe that the second script is already - connected to the DOM. It removes the second script, so that by the time its - HTML element post-insertion steps run, it is no longer connected, and - does not get prepared.

      + post-insertion steps run for the first script that was atomically inserted + by append(), it can observe that the second + script is already connected to the DOM. It removes the second + script, so that by the time its HTML element post-insertion + steps run, it is no longer connected, and does not get prepared.

      2. @@ -62303,7 +62304,7 @@ document.body.append(script1, script2);

      This has an interesting implication on the execution order of a script element - and any newly-inserted child script elements. Consider the following example:

      + and any newly-inserted child script elements. Consider the following snippet:

      <script id=outer-script></script>
 

From 4f1c9ef1ce9073ccf3677ccf601ba179d75cc73b Mon Sep 17 00:00:00 2001
From: Dominic Farolino 
Date: Mon, 13 May 2024 10:39:00 -0400
Subject: [PATCH 09/14] `` -> ``

---
 source | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/source b/source
index cfe26af0ef9..37a81c29931 100644
--- a/source
+++ b/source
@@ -62283,7 +62283,7 @@ document.body.append(script1, script2);
      post-insertion steps run for the first script that was atomically inserted
      by append(), it can observe that the second
      script is already connected to the DOM. It removes the second
-     script, so that by the time its HTML element post-insertion
+     script, so that by the time its HTML element post-insertion
      steps run, it is no longer connected, and does not get prepared.
      From 938e81150572578e90b433b8bd1a2b1dfc6a6181 Mon Sep 17 00:00:00 2001 From: Dominic Farolino Date: Fri, 12 Jul 2024 14:22:38 -0400 Subject: [PATCH 10/14] Use post-connection steps by new name --- source | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/source b/source index 37a81c29931..5cfe61d14ae 100644 --- a/source +++ b/source @@ -1763,7 +1763,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute data-x="control">controls or U+0020 SPACE).

      An HTML element can have specific HTML element insertion steps, HTML element - post-insertion steps, and HTML element removing steps, all defined for the + post-connection steps, and HTML element removing steps, all defined for the element's local name.

      The insertion steps for the HTML Standard, given @@ -1795,15 +1795,15 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute node document.

    -

    The post-insertion steps for the HTML +

    The post-connection steps for the HTML Standard, given insertedNode, are defined as the following:

    1. If insertedNode is an element whose namespace is the HTML namespace, and this - standard defines HTML element post-insertion + standard defines HTML element post-connection steps for insertedNode's local - name, then run the corresponding HTML element post-insertion steps given + name, then run the corresponding HTML element post-connection steps given insertedNode.

    @@ -3204,7 +3204,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
  • The pre-insert, insert, append, replace, replace all, string replace all, remove, and adopt algorithms for nodes
  • The descendant concept
  • The insertion steps, -
  • The post-insertion steps, +
  • The post-connection steps, removing steps, adopting steps, and children changed steps hooks for elements
    • @@ -62255,7 +62255,7 @@ o............A....e
    -

    The script HTML element post-insertion steps, given +

    The script HTML element post-connection steps, given insertedNode, are:

      @@ -62280,10 +62280,10 @@ document.body.append(script1, script2); </script>

      Nothing is printed to the console in this example. By the time the HTML element - post-insertion steps run for the first script that was atomically inserted + post-connection steps run for the first script that was atomically inserted by append(), it can observe that the second script is already connected to the DOM. It removes the second - script, so that by the time its HTML element post-insertion + script, so that by the time its HTML element post-connection steps run, it is no longer connected, and does not get prepared.

      @@ -62298,7 +62298,7 @@ document.body.append(script1, script2);

      The script children changed steps are:

        -

      1. Run the script HTML element post-insertion steps, given the +

      2. Run the script HTML element post-connection steps, given the script element.

      @@ -62339,7 +62339,7 @@ document.body.append(script1, script2); prepares that script; because its body is now non-empty, this executes the contents of the two Text nodes, in order.

      -

    1. The script HTML element post-insertion steps finally run for +

    2. The script HTML element post-connection steps finally run for innerScript, causing its body to execute.

    @@ -62352,7 +62352,7 @@ document.body.append(script1, script2); data-x="attr-script-src">src     content attribute was not empty, then return.

    -

  • Run the script HTML element post-insertion steps, given the +

  • Run the script HTML element post-connection steps, given the script element.

    • From eb5b1639dbba9df4bb97a48e0501f256ccdeccba Mon Sep 17 00:00:00 2001 From: Dominic Farolino Date: Fri, 12 Jul 2024 16:19:07 -0400 Subject: [PATCH 11/14] Be consistent with single quotes --- source | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/source b/source index 5cfe61d14ae..3fa5956fff5 100644 --- a/source +++ b/source @@ -62311,10 +62311,10 @@ document.body.append(script1, script2); <script> const outerScript = document.querySelector('#outer-script'); - const start = new Text("console.log(1);"); + const start = new Text('console.log(1);'); const innerScript = document.createElement('script'); innerScript.innerText = `console.log('inner script executing')`; - const end = new Text("console.log(2);"); + const end = new Text('console.log(2);'); outerScript.append(start, innerScript, end); From 8e8689a244211bdc2eee7d0044cdf7cf5693f1e6 Mon Sep 17 00:00:00 2001 From: Dominic Farolino Date: Mon, 19 Aug 2024 13:01:35 +0200 Subject: [PATCH 12/14] Address nits --- source | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/source b/source index 3fa5956fff5..f1007c23159 100644 --- a/source +++ b/source @@ -62274,7 +62274,7 @@ script1.innerText = ` const script2 = document.createElement('script'); script2.id = 'script2'; -script2.innerText = `console.log('script#2 running')`; +script2.textContent = `console.log('script#2 running')`; document.body.append(script1, script2); </script>     @@ -62289,8 +62289,7 @@ document.body.append(script1, script2); -

  • If insertedNode is marked as being parser-inserted, then - return.

    • +

  • If insertedNode is parser-inserted, then return.

  • Prepare the script element given insertedNode.

    • @@ -62313,7 +62312,7 @@ document.body.append(script1, script2); const start = new Text('console.log(1);'); const innerScript = document.createElement('script'); - innerScript.innerText = `console.log('inner script executing')`; + innerScript.textContent = `console.log('inner script executing')`; const end = new Text('console.log(2);'); outerScript.append(start, innerScript, end); @@ -62325,7 +62324,7 @@ document.body.append(script1, script2); </script>

    By the time the second script block executes, the outer-script has - already been prepared, but beacuse it is empty, + already been prepared, but because it is empty, it did not execute and therefore is not marked as already started. The atomic insertion of the Text nodes and nested script element have the following effects:

    From bc216e49b4eb7f08f13e7a989e1493d8c3918805 Mon Sep 17 00:00:00 2001 From: Dominic Farolino Date: Sat, 24 Aug 2024 00:23:18 +0200 Subject: [PATCH 13/14] Use attribute change steps. Remove null => value condition --- source | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/source b/source index f1007c23159..a0a3e52d517 100644 --- a/source +++ b/source @@ -62343,15 +62343,15 @@ document.body.append(script1, script2); -

    When the src attribute is set, user agents must run these - steps:

    +

    The following attribute change + steps, given element, localName, oldValue, + value, and namespace, are used for all script elements:

      -

    1. If the previous value of the script's src content attribute was not empty, then - return.

      2. +

    2. If namespace is not null, then return.

      3. -

    3. Run the script HTML element post-connection steps, given the +

    4. If localName is src, then run the + script HTML element post-connection steps, given the script element.

    From 4cf53bd9abfdfe9e5fc5c2ce02c094377ea95aa6 Mon Sep 17 00:00:00 2001 From: Domenic Denicola Date: Mon, 26 Aug 2024 11:35:58 +0900 Subject: [PATCH 14/14] Nit --- source | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/source b/source index a0a3e52d517..c77663c9bd8 100644 --- a/source +++ b/source @@ -62351,8 +62351,8 @@ document.body.append(script1, script2);

  • If namespace is not null, then return.

  • If localName is src, then run the - script HTML element post-connection steps, given the - script element.

    • + script HTML element post-connection steps, given + element.

    To prepare the script element given a script