From 2f0e9146f9ead4ae429778341fda25c0d45a8377 Mon Sep 17 00:00:00 2001 From: Anne van Kesteren Date: Thu, 3 Jan 2019 11:35:07 +0100 Subject: [PATCH] Custom element reactions ought not to modify the node tree Supersedes and closes #4127. Closes https://github.com/w3c/webcomponents/issues/760. --- source | 35 ++++++++++++++++++++++++++++++++++- 1 file changed, 34 insertions(+), 1 deletion(-) diff --git a/source b/source index 9aca4856608..0f77be30e7e 100644 --- a/source +++ b/source @@ -66143,7 +66143,8 @@ console.log(plasticButton.outerHTML); // will output '<button is="plastic-but console.assert(outOfDocument instanceof ExampleElement); </script> -

Requirements for custom element constructors

+

Requirements for custom element constructors and + reactions

When authoring custom element constructors, authors are bound by the following conformance requirements:

@@ -66183,6 +66184,37 @@ console.log(plasticButton.outerHTML); // will output '<button is="plastic-but done inside a constructor-initiated microtask, as a microtask checkpoint can occur immediately after construction.

+

When authoring custom element reactions, + authors should avoid manipulating the node tree as this can lead to unexpected results.

+ +
+

An element's connectedCallback can be queued before the element is + disconnected, but as the callback queue is still processed, it results in a connectedCallback for an element that is no longer connected:

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

Core concepts

A custom element is an element that is + Tomek Wytrębowicz, Tommy Thorsen, Tony Ross, Tooru Fujisawa,