Custom element reactions ought not to modify the node tree

Supersedes and closes whatwg#4127. Closes WICG/webcomponents#760.

source

@@ -66143,7 +66143,8 @@ console.log(plasticButton.outerHTML); // will output '<button is="plastic-but
   console.assert(outOfDocument instanceof ExampleElement);
 &lt;/script></code></pre>
 
-  <h4 id="custom-element-conformance">Requirements for custom element constructors</h4>
+  <h4 id="custom-element-conformance">Requirements for custom element constructors and
+  reactions</h4>
 
   <p>When authoring <span data-x="custom element constructor">custom element constructors</span>,
   authors are bound by the following conformance requirements:</p>
@@ -66183,6 +66184,37 @@ console.log(plasticButton.outerHTML); // will output '&lt;button is="plastic-but
   done inside a constructor-initiated <span>microtask</span>, as a <span data-x="perform a microtask
   checkpoint">microtask checkpoint</span> can occur immediately after construction.</p>
 
+  <p>When authoring <span data-x="concept-custom-element-reaction">custom element reactions</span>,
+  authors should avoid manipulating the node tree as this can lead to unexpected results.</p>
+
+  <div class="example">
+   <p>An element's <code data-x="">connectedCallback</code> can be queued before the element is
+   disconnected, but as the callback queue is still processed, it results in a <code
+   data-x="">connectedCallback</code> for an element that is no longer connected:</p>
+
+   <pre><code class="js" data-x="">class CParent extends HTMLElement {
+  connectedCallback() {
+    this.firstChild.remove();
+  }
+}
+customElements.define("c-parent", CParent);
+
+class CChild extends HTMLElement {
+  connectedCallback() {
+    console.log("CChild connectedCallback: isConnected =", this.isConnected);
+  }
+}
+customElements.define("c-child", CChild);
+
+const parent = new CParent(),
+      child = new CChild();
+parent.append(child);
+document.body.append(parent);
+
+// Logs:
+// CChild connectedCallback: isConnected = false</code></pre>
+  </div>
+
   <h4 id="custom-elements-core-concepts">Core concepts</h4>
 
   <p>A <dfn data-export="">custom element</dfn> is an element that is <span
@@ -122617,6 +122649,7 @@ INSERT INTERFACES HERE
   Tom Pike,
   Tom Schuster,
   Tomasz Jakut, <!-- Comandeer on GitHub -->
+  Tomek Wytrębowicz,
   Tommy Thorsen,
   Tony Ross,
   Tooru Fujisawa,