Add a nonintuitive disconnectedCallback example

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

Author: annevk

source

@@ -66945,6 +66945,34 @@ customElements.define("x-foo", class extends HTMLElement {
   reaction</span> code can perform its own mutations, it is not possible to give a global ordering
   guarantee across multiple elements.)</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 container = document.createElement("div");
+container.innerHTML = "&lt;c-parent>&lt;c-child>&lt;/c-child>&lt;/c-parent>";
+customElements.upgrade(container);
+document.body.appendChild(container);
+
+// Logs:
+// CChild connectedCallback: isConnected = false</code></pre>
+  </div>
+
   <div w-nodev>
 
   <hr>
@@ -122593,6 +122621,7 @@ INSERT INTERFACES HERE
   Tom Pike,
   Tom Schuster,
   Tomasz Jakut, <!-- Comandeer on GitHub -->
+  Tomek Wytrębowicz,
   Tommy Thorsen,
   Tony Ross,
   Tooru Fujisawa,