diff --git a/source b/source index f0f10e15d88..c77663c9bd8 100644 --- a/source +++ b/source @@ -1762,10 +1762,9 @@ 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-connection steps, and HTML element removing steps, all defined for the + element's local name.

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

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

+

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-connection + steps for insertedNode's local + name, then run the corresponding HTML element post-connection steps given + insertedNode.

    2. +
+

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

@@ -3154,6 +3165,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
    • @@ -3192,6 +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-connection steps, removing steps, adopting steps, and children changed steps hooks for elements
    • @@ -62242,22 +62255,105 @@ 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-connection steps, given + insertedNode, are:

    - + 
    <script>
+const script1 = document.createElement('script');
+script1.innerText = `
+  document.querySelector('#script2').remove();
+`;
+
+const script2 = document.createElement('script');
+script2.id = 'script2';
+script2.textContent = `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-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-connection + steps run, it is no longer connected, and does not get prepared.

    + + + +

  • If insertedNode is parser-inserted, then return.

    • + +

  • Prepare the script element given insertedNode.

    • + + +

    The script children changed steps are:

    + +
      +

    1. Run the script HTML element post-connection 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 snippet:

    + + 
    <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.textContent = `console.log('inner script executing')`;
+  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 + 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:

    + +
      +

    1. All three child nodes get atomically inserted as children of outer-script; all of their 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-connection steps finally run for + innerScript, causing its body to execute.

      4. +
    +
    + +

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

    + +
      +

    1. If namespace is not null, then return.

      2. + +

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

      3. +

    To prepare the script element given a script element el: