@remote-dom/polyfill 1.3.1 → 1.4.1

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @remote-dom/polyfill
 
+## 1.4.1
+
+### Patch Changes
+
+- [#472](https://github.com/Shopify/remote-dom/pull/472) [`1473a3c`](https://github.com/Shopify/remote-dom/commit/1473a3c521e8d4d44d50c2f15680f28997270dc8) Thanks [@jakearchibald](https://github.com/jakearchibald)! - Fix removeChild so it clears parent/sibling references
+
+- [#472](https://github.com/Shopify/remote-dom/pull/472) [`1473a3c`](https://github.com/Shopify/remote-dom/commit/1473a3c521e8d4d44d50c2f15680f28997270dc8) Thanks [@jakearchibald](https://github.com/jakearchibald)! - Add node.parentElement
+
+- [#470](https://github.com/Shopify/remote-dom/pull/470) [`08839d3`](https://github.com/Shopify/remote-dom/commit/08839d3c136b63024ef725d9cf427e250f2978d3) Thanks [@developit](https://github.com/developit)! - window aliases should refer to globalThis
+
+## 1.4.0
+
+### Minor Changes
+
+- [#446](https://github.com/Shopify/remote-dom/pull/446) [`b297fc5`](https://github.com/Shopify/remote-dom/commit/b297fc5efecc6479fa5e0e3bdcdb48dea721df43) Thanks [@jakearchibald](https://github.com/jakearchibald)! - Implement node.isConnected
+
+### Patch Changes
+
+- [#446](https://github.com/Shopify/remote-dom/pull/446) [`b297fc5`](https://github.com/Shopify/remote-dom/commit/b297fc5efecc6479fa5e0e3bdcdb48dea721df43) Thanks [@jakearchibald](https://github.com/jakearchibald)! - Ensure that the insert and remove hooks are only called for element parents.
+
+- [#446](https://github.com/Shopify/remote-dom/pull/446) [`b297fc5`](https://github.com/Shopify/remote-dom/commit/b297fc5efecc6479fa5e0e3bdcdb48dea721df43) Thanks [@jakearchibald](https://github.com/jakearchibald)! - Make connectedCallback and disconnectedCallback call on connect/disconnect recursively
+
 ## 1.3.1
 
 ### Patch Changes

package/build/cjs/Attr.cjs

@@ -10,7 +10,6 @@ class Attr extends Node.Node {
   [constants.NS] = null;
   [constants.NEXT] = null;
   [constants.OWNER_ELEMENT] = null;
-  isConnected = false;
   constructor(name, value, namespace) {
     super();
     this[constants.NAME] = name;

package/build/cjs/Document.cjs

@@ -19,6 +19,7 @@ const HTMLHtmlElement = require('./HTMLHtmlElement.cjs');
 class Document extends ParentNode.ParentNode {
   nodeType = (() => constants.NodeType.DOCUMENT_NODE)();
   [constants.NAME] = '#document';
+  [constants.IS_CONNECTED] = true;
   constructor(defaultView) {
     super();
     this.defaultView = defaultView;
@@ -26,6 +27,7 @@ class Document extends ParentNode.ParentNode {
     this.documentElement = setupElement(new HTMLHtmlElement.HTMLHtmlElement(), this, 'html');
     this.body = setupElement(new HTMLBodyElement.HTMLBodyElement(), this, 'body');
     this.head = setupElement(new HTMLHeadElement.HTMLHeadElement(), this, 'head');
+    this.appendChild(this.documentElement);
     this.documentElement.appendChild(this.head);
     this.documentElement.appendChild(this.body);
   }

package/build/cjs/EventTarget.cjs

@@ -7,11 +7,14 @@ const Event = require('./Event.cjs');
 
 const ONCE_LISTENERS = Symbol('onceListeners');
 class EventTarget {
+  [constants.LISTENERS] = (() => undefined)();
+  [ONCE_LISTENERS] = (() => undefined)();
+
   /**
    * Property set by entities that extend this class that are part of the DOM tree.
    * @internal
    */
-
+  [constants.OWNER_DOCUMENT] = (() => undefined)();
   addEventListener(type, listener, options) {
     if (listener == null) return;
     const capture = options === true || options && options.capture === true;

package/build/cjs/Node.cjs

@@ -13,6 +13,7 @@ class Node extends EventTarget.EventTarget {
   [constants.CHILD] = null;
   [constants.PREV] = null;
   [constants.NEXT] = null;
+  [constants.IS_CONNECTED] = false;
   get [constants.HOOKS]() {
     return this[constants.OWNER_DOCUMENT].defaultView[constants.HOOKS];
   }
@@ -25,6 +26,9 @@ class Node extends EventTarget.EventTarget {
   get ownerDocument() {
     return this[constants.OWNER_DOCUMENT];
   }
+  get isConnected() {
+    return this[constants.IS_CONNECTED];
+  }
   isDefaultNamespace(namespace) {
     return namespace === constants.NamespaceURI.XHTML;
   }
@@ -32,6 +36,12 @@ class Node extends EventTarget.EventTarget {
     return this[constants.PARENT];
   }
   set parentNode(_readonly) {}
+  get parentElement() {
+    const parent = this[constants.PARENT];
+    if (!parent || parent.nodeType !== 1) return null;
+    return parent;
+  }
+  set parentElement(_readonly) {}
   get previousSibling() {
     return this[constants.PREV];
   }
@@ -76,17 +86,11 @@ class Node extends EventTarget.EventTarget {
   get textContent() {
     if (shared.isCharacterData(this)) return this.data;
     let text = '';
-    function walk(node) {
+    for (const node of shared.descendants(this)) {
       if (shared.isTextNode(node)) {
         text += node.data;
       }
-      const child = node[constants.CHILD];
-      if (child) walk(child);
-      const sibling = node[constants.NEXT];
-      if (sibling) walk(sibling);
     }
-    const child = this[constants.CHILD];
-    if (child) walk(child);
     return text;
   }
   set textContent(data) {

package/build/cjs/ParentNode.cjs

@@ -6,6 +6,7 @@ const constants = require('./constants.cjs');
 const ChildNode = require('./ChildNode.cjs');
 const NodeList = require('./NodeList.cjs');
 const selectors = require('./selectors.cjs');
+const shared = require('./shared.cjs');
 
 class ParentNode extends ChildNode.ChildNode {
   childNodes = (() => new NodeList.NodeList())();
@@ -49,8 +50,18 @@ class ParentNode extends ChildNode.ChildNode {
       const children = this.children;
       children.splice(children.indexOf(child), 1);
     }
-    child.disconnectedCallback?.();
-    this[constants.HOOKS].removeChild?.(this, child, childNodesIndex);
+    child[constants.PARENT] = null;
+    child[constants.NEXT] = null;
+    child[constants.PREV] = null;
+    if (this[constants.IS_CONNECTED]) {
+      for (const node of shared.selfAndDescendants(child)) {
+        node[constants.IS_CONNECTED] = false;
+        node.disconnectedCallback?.();
+      }
+    }
+    if (this.nodeType === constants.NodeType.ELEMENT_NODE) {
+      this[constants.HOOKS].removeChild?.(this, child, childNodesIndex);
+    }
   }
   replaceChild(newChild, oldChild) {
     if (oldChild.parentNode !== this) {
@@ -125,8 +136,15 @@ class ParentNode extends ChildNode.ChildNode {
       childNodes.push(child);
       if (isElement) this.children.push(child);
     }
-    child.connectedCallback?.();
-    this[constants.HOOKS].insertChild?.(this, child, insertIndex);
+    if (this[constants.IS_CONNECTED]) {
+      for (const node of shared.selfAndDescendants(child)) {
+        node[constants.IS_CONNECTED] = true;
+        node.connectedCallback?.();
+      }
+    }
+    if (this.nodeType === constants.NodeType.ELEMENT_NODE) {
+      this[constants.HOOKS].insertChild?.(this, child, insertIndex);
+    }
   }
 }
 

package/build/cjs/Window.cjs

@@ -24,6 +24,7 @@ const constants = require('./constants.cjs');
 class Window extends EventTarget.EventTarget {
   [constants.HOOKS] = {};
   name = '';
+  window = this;
   parent = this;
   self = this;
   top = this;
@@ -48,30 +49,15 @@ class Window extends EventTarget.EventTarget {
   HTMLTemplateElement = (() => HTMLTemplateElement.HTMLTemplateElement)();
   MutationObserver = (() => MutationObserver.MutationObserver)();
   static setGlobal(window) {
-    const properties = Object.getOwnPropertyDescriptors(window);
-    delete properties.self;
-    Object.defineProperties(globalThis, {
-      ...properties,
-      window: {
-        value: window,
-        configurable: true,
-        writable: true,
-        enumerable: true
+    for (const property in window) {
+      if (window[property] === window) {
+        window[property] = globalThis;
       }
-    });
-    if (typeof self === 'undefined') {
-      Object.defineProperty(globalThis, 'self', {
-        value: window,
-        configurable: true,
-        writable: true,
-        enumerable: true
-      });
-    } else {
-      // There can already be a `self`, like when polyfilling the DOM
-      // in a Web Worker. In those cases, just mirror all the `Window`
-      // properties onto `self`, rather than wholly redefining it.
-      Object.defineProperties(self, properties);
     }
+    const eventTargetPrototypeProperties = Object.getOwnPropertyDescriptors(EventTarget.EventTarget.prototype);
+    const properties = Object.getOwnPropertyDescriptors(window);
+    Object.defineProperties(globalThis, eventTargetPrototypeProperties);
+    Object.defineProperties(globalThis, properties);
   }
 }
 

package/build/cjs/constants.cjs

@@ -19,6 +19,7 @@ const PATH = Symbol('path');
 const STOP_IMMEDIATE_PROPAGATION = Symbol('stop_immediate_propagation');
 const CONTENT = Symbol('content');
 const HOOKS = Symbol('hooks');
+const IS_CONNECTED = Symbol('is_connected');
 
 // @TODO remove explicit values
 let NodeType = /*#__PURE__*/function (NodeType) {
@@ -47,6 +48,7 @@ exports.CHILD = CHILD;
 exports.CONTENT = CONTENT;
 exports.DATA = DATA;
 exports.HOOKS = HOOKS;
+exports.IS_CONNECTED = IS_CONNECTED;
 exports.IS_TRUSTED = IS_TRUSTED;
 exports.LISTENERS = LISTENERS;
 exports.NAME = NAME;

package/build/cjs/shared.cjs

@@ -55,11 +55,31 @@ function cloneNode(node, deep, document = node.ownerDocument) {
     return cloned;
   }
 }
+function descendants(node) {
+  const nodes = [];
+  const walk = node => {
+    nodes.push(node);
+    const child = node[constants.CHILD];
+    if (child) walk(child);
+    const sibling = node[constants.NEXT];
+    if (sibling) walk(sibling);
+  };
+  const child = node[constants.CHILD];
+  if (child) walk(child);
+  return nodes;
+}
+function selfAndDescendants(node) {
+  const nodes = descendants(node);
+  nodes.unshift(node);
+  return nodes;
+}
 
 exports.cloneNode = cloneNode;
+exports.descendants = descendants;
 exports.isCharacterData = isCharacterData;
 exports.isCommentNode = isCommentNode;
 exports.isDocumentFragmentNode = isDocumentFragmentNode;
 exports.isElementNode = isElementNode;
 exports.isParentNode = isParentNode;
 exports.isTextNode = isTextNode;
+exports.selfAndDescendants = selfAndDescendants;

package/build/esm/Attr.mjs

@@ -6,7 +6,6 @@ class Attr extends Node {
   [NS] = null;
   [NEXT] = null;
   [OWNER_ELEMENT] = null;
-  isConnected = false;
   constructor(name, value, namespace) {
     super();
     this[NAME] = name;

package/build/esm/Document.mjs

@@ -1,4 +1,4 @@
-import { NodeType, NAME, OWNER_DOCUMENT, HOOKS, NamespaceURI, NS } from './constants.mjs';
+import { NodeType, NAME, IS_CONNECTED, OWNER_DOCUMENT, HOOKS, NamespaceURI, NS } from './constants.mjs';
 import { Event } from './Event.mjs';
 import { ParentNode } from './ParentNode.mjs';
 import { Element } from './Element.mjs';
@@ -15,6 +15,7 @@ import { HTMLHtmlElement } from './HTMLHtmlElement.mjs';
 class Document extends ParentNode {
   nodeType = (() => NodeType.DOCUMENT_NODE)();
   [NAME] = '#document';
+  [IS_CONNECTED] = true;
   constructor(defaultView) {
     super();
     this.defaultView = defaultView;
@@ -22,6 +23,7 @@ class Document extends ParentNode {
     this.documentElement = setupElement(new HTMLHtmlElement(), this, 'html');
     this.body = setupElement(new HTMLBodyElement(), this, 'body');
     this.head = setupElement(new HTMLHeadElement(), this, 'head');
+    this.appendChild(this.documentElement);
     this.documentElement.appendChild(this.head);
     this.documentElement.appendChild(this.body);
   }

package/build/esm/EventTarget.mjs

@@ -3,11 +3,14 @@ import { fireEvent, CAPTURE_MARKER, EventPhase } from './Event.mjs';
 
 const ONCE_LISTENERS = Symbol('onceListeners');
 class EventTarget {
+  [LISTENERS] = (() => undefined)();
+  [ONCE_LISTENERS] = (() => undefined)();
+
   /**
    * Property set by entities that extend this class that are part of the DOM tree.
    * @internal
    */
-
+  [OWNER_DOCUMENT] = (() => undefined)();
   addEventListener(type, listener, options) {
     if (listener == null) return;
     const capture = options === true || options && options.capture === true;

package/build/esm/Node.mjs

@@ -1,6 +1,6 @@
-import { NodeType, NAME, PARENT, CHILD, PREV, NEXT, HOOKS, OWNER_DOCUMENT, NamespaceURI } from './constants.mjs';
+import { NodeType, NAME, PARENT, CHILD, PREV, NEXT, IS_CONNECTED, HOOKS, OWNER_DOCUMENT, NamespaceURI } from './constants.mjs';
 import { EventTarget } from './EventTarget.mjs';
-import { isCharacterData, isParentNode, cloneNode, isTextNode } from './shared.mjs';
+import { isCharacterData, descendants, isTextNode, isParentNode, cloneNode } from './shared.mjs';
 
 class Node extends EventTarget {
   nodeType = (() => NodeType.NODE)();
@@ -9,6 +9,7 @@ class Node extends EventTarget {
   [CHILD] = null;
   [PREV] = null;
   [NEXT] = null;
+  [IS_CONNECTED] = false;
   get [HOOKS]() {
     return this[OWNER_DOCUMENT].defaultView[HOOKS];
   }
@@ -21,6 +22,9 @@ class Node extends EventTarget {
   get ownerDocument() {
     return this[OWNER_DOCUMENT];
   }
+  get isConnected() {
+    return this[IS_CONNECTED];
+  }
   isDefaultNamespace(namespace) {
     return namespace === NamespaceURI.XHTML;
   }
@@ -28,6 +32,12 @@ class Node extends EventTarget {
     return this[PARENT];
   }
   set parentNode(_readonly) {}
+  get parentElement() {
+    const parent = this[PARENT];
+    if (!parent || parent.nodeType !== 1) return null;
+    return parent;
+  }
+  set parentElement(_readonly) {}
   get previousSibling() {
     return this[PREV];
   }
@@ -72,17 +82,11 @@ class Node extends EventTarget {
   get textContent() {
     if (isCharacterData(this)) return this.data;
     let text = '';
-    function walk(node) {
+    for (const node of descendants(this)) {
       if (isTextNode(node)) {
         text += node.data;
       }
-      const child = node[CHILD];
-      if (child) walk(child);
-      const sibling = node[NEXT];
-      if (sibling) walk(sibling);
     }
-    const child = this[CHILD];
-    if (child) walk(child);
     return text;
   }
   set textContent(data) {

package/build/esm/ParentNode.mjs

@@ -1,7 +1,8 @@
-import { PREV, NEXT, CHILD, HOOKS, NodeType, OWNER_DOCUMENT, PARENT } from './constants.mjs';
+import { PREV, NEXT, CHILD, PARENT, IS_CONNECTED, NodeType, HOOKS, OWNER_DOCUMENT } from './constants.mjs';
 import { ChildNode, toNode } from './ChildNode.mjs';
 import { NodeList } from './NodeList.mjs';
 import { querySelectorAll, querySelector } from './selectors.mjs';
+import { selfAndDescendants } from './shared.mjs';
 
 class ParentNode extends ChildNode {
   childNodes = (() => new NodeList())();
@@ -45,8 +46,18 @@ class ParentNode extends ChildNode {
       const children = this.children;
       children.splice(children.indexOf(child), 1);
     }
-    child.disconnectedCallback?.();
-    this[HOOKS].removeChild?.(this, child, childNodesIndex);
+    child[PARENT] = null;
+    child[NEXT] = null;
+    child[PREV] = null;
+    if (this[IS_CONNECTED]) {
+      for (const node of selfAndDescendants(child)) {
+        node[IS_CONNECTED] = false;
+        node.disconnectedCallback?.();
+      }
+    }
+    if (this.nodeType === NodeType.ELEMENT_NODE) {
+      this[HOOKS].removeChild?.(this, child, childNodesIndex);
+    }
   }
   replaceChild(newChild, oldChild) {
     if (oldChild.parentNode !== this) {
@@ -121,8 +132,15 @@ class ParentNode extends ChildNode {
       childNodes.push(child);
       if (isElement) this.children.push(child);
     }
-    child.connectedCallback?.();
-    this[HOOKS].insertChild?.(this, child, insertIndex);
+    if (this[IS_CONNECTED]) {
+      for (const node of selfAndDescendants(child)) {
+        node[IS_CONNECTED] = true;
+        node.connectedCallback?.();
+      }
+    }
+    if (this.nodeType === NodeType.ELEMENT_NODE) {
+      this[HOOKS].insertChild?.(this, child, insertIndex);
+    }
   }
 }
 

package/build/esm/Window.mjs

@@ -20,6 +20,7 @@ import { HOOKS } from './constants.mjs';
 class Window extends EventTarget {
   [HOOKS] = {};
   name = '';
+  window = this;
   parent = this;
   self = this;
   top = this;
@@ -44,30 +45,15 @@ class Window extends EventTarget {
   HTMLTemplateElement = (() => HTMLTemplateElement)();
   MutationObserver = (() => MutationObserver)();
   static setGlobal(window) {
-    const properties = Object.getOwnPropertyDescriptors(window);
-    delete properties.self;
-    Object.defineProperties(globalThis, {
-      ...properties,
-      window: {
-        value: window,
-        configurable: true,
-        writable: true,
-        enumerable: true
+    for (const property in window) {
+      if (window[property] === window) {
+        window[property] = globalThis;
       }
-    });
-    if (typeof self === 'undefined') {
-      Object.defineProperty(globalThis, 'self', {
-        value: window,
-        configurable: true,
-        writable: true,
-        enumerable: true
-      });
-    } else {
-      // There can already be a `self`, like when polyfilling the DOM
-      // in a Web Worker. In those cases, just mirror all the `Window`
-      // properties onto `self`, rather than wholly redefining it.
-      Object.defineProperties(self, properties);
     }
+    const eventTargetPrototypeProperties = Object.getOwnPropertyDescriptors(EventTarget.prototype);
+    const properties = Object.getOwnPropertyDescriptors(window);
+    Object.defineProperties(globalThis, eventTargetPrototypeProperties);
+    Object.defineProperties(globalThis, properties);
   }
 }
 

package/build/esm/constants.mjs

@@ -15,6 +15,7 @@ const PATH = Symbol('path');
 const STOP_IMMEDIATE_PROPAGATION = Symbol('stop_immediate_propagation');
 const CONTENT = Symbol('content');
 const HOOKS = Symbol('hooks');
+const IS_CONNECTED = Symbol('is_connected');
 
 // @TODO remove explicit values
 let NodeType = /*#__PURE__*/function (NodeType) {
@@ -38,4 +39,4 @@ let NamespaceURI = /*#__PURE__*/function (NamespaceURI) {
   return NamespaceURI;
 }({});
 
-export { ATTRIBUTES, CHILD, CONTENT, DATA, HOOKS, IS_TRUSTED, LISTENERS, NAME, NEXT, NS, NamespaceURI, NodeType, OWNER_DOCUMENT, OWNER_ELEMENT, PARENT, PATH, PREV, STOP_IMMEDIATE_PROPAGATION, VALUE };
+export { ATTRIBUTES, CHILD, CONTENT, DATA, HOOKS, IS_CONNECTED, IS_TRUSTED, LISTENERS, NAME, NEXT, NS, NamespaceURI, NodeType, OWNER_DOCUMENT, OWNER_ELEMENT, PARENT, PATH, PREV, STOP_IMMEDIATE_PROPAGATION, VALUE };

package/build/esm/shared.mjs

@@ -1,4 +1,4 @@
-import { DATA, ATTRIBUTES, OWNER_DOCUMENT, NodeType } from './constants.mjs';
+import { DATA, NodeType, ATTRIBUTES, OWNER_DOCUMENT, CHILD, NEXT } from './constants.mjs';
 
 function isCharacterData(node) {
   return DATA in node;
@@ -51,5 +51,23 @@ function cloneNode(node, deep, document = node.ownerDocument) {
     return cloned;
   }
 }
+function descendants(node) {
+  const nodes = [];
+  const walk = node => {
+    nodes.push(node);
+    const child = node[CHILD];
+    if (child) walk(child);
+    const sibling = node[NEXT];
+    if (sibling) walk(sibling);
+  };
+  const child = node[CHILD];
+  if (child) walk(child);
+  return nodes;
+}
+function selfAndDescendants(node) {
+  const nodes = descendants(node);
+  nodes.unshift(node);
+  return nodes;
+}
 
-export { cloneNode, isCharacterData, isCommentNode, isDocumentFragmentNode, isElementNode, isParentNode, isTextNode };
+export { cloneNode, descendants, isCharacterData, isCommentNode, isDocumentFragmentNode, isElementNode, isParentNode, isTextNode, selfAndDescendants };

package/build/esnext/Attr.esnext

@@ -7,7 +7,6 @@ class Attr extends Node {
   [NEXT] = null;
   [VALUE];
   [OWNER_ELEMENT] = null;
-  isConnected = false;
   constructor(name, value, namespace) {
     super();
     this[NAME] = name;

package/build/esnext/Document.esnext

@@ -1,4 +1,4 @@
-import { NodeType, NAME, OWNER_DOCUMENT, HOOKS, NamespaceURI, NS } from './constants.esnext';
+import { NodeType, NAME, IS_CONNECTED, OWNER_DOCUMENT, HOOKS, NamespaceURI, NS } from './constants.esnext';
 import { Event } from './Event.esnext';
 import { ParentNode } from './ParentNode.esnext';
 import { Element } from './Element.esnext';
@@ -19,6 +19,7 @@ class Document extends ParentNode {
   head;
   documentElement;
   defaultView;
+  [IS_CONNECTED] = true;
   constructor(defaultView) {
     super();
     this.defaultView = defaultView;
@@ -26,6 +27,7 @@ class Document extends ParentNode {
     this.documentElement = setupElement(new HTMLHtmlElement(), this, "html");
     this.body = setupElement(new HTMLBodyElement(), this, "body");
     this.head = setupElement(new HTMLHeadElement(), this, "head");
+    this.appendChild(this.documentElement);
     this.documentElement.appendChild(this.head);
     this.documentElement.appendChild(this.body);
   }

package/build/esnext/EventTarget.esnext

@@ -3,13 +3,13 @@ import { fireEvent, EventPhase, CAPTURE_MARKER } from './Event.esnext';
 
 const ONCE_LISTENERS = Symbol("onceListeners");
 class EventTarget {
-  [LISTENERS];
-  [ONCE_LISTENERS];
+  [LISTENERS] = void 0;
+  [ONCE_LISTENERS] = void 0;
   /**
    * Property set by entities that extend this class that are part of the DOM tree.
    * @internal
    */
-  [OWNER_DOCUMENT];
+  [OWNER_DOCUMENT] = void 0;
   addEventListener(type, listener, options) {
     if (listener == null) return;
     const capture = options === true || options && options.capture === true;

package/build/esnext/Node.esnext

@@ -1,6 +1,6 @@
-import { NodeType, OWNER_DOCUMENT, NAME, PARENT, CHILD, PREV, NEXT, HOOKS, NamespaceURI } from './constants.esnext';
+import { NodeType, OWNER_DOCUMENT, NAME, PARENT, CHILD, PREV, NEXT, IS_CONNECTED, HOOKS, NamespaceURI } from './constants.esnext';
 import { EventTarget } from './EventTarget.esnext';
-import { isCharacterData, isParentNode, cloneNode, isTextNode } from './shared.esnext';
+import { isCharacterData, descendants, isTextNode, isParentNode, cloneNode } from './shared.esnext';
 
 class Node extends EventTarget {
   nodeType = NodeType.NODE;
@@ -10,6 +10,7 @@ class Node extends EventTarget {
   [CHILD] = null;
   [PREV] = null;
   [NEXT] = null;
+  [IS_CONNECTED] = false;
   get [HOOKS]() {
     return this[OWNER_DOCUMENT].defaultView[HOOKS];
   }
@@ -22,6 +23,9 @@ class Node extends EventTarget {
   get ownerDocument() {
     return this[OWNER_DOCUMENT];
   }
+  get isConnected() {
+    return this[IS_CONNECTED];
+  }
   isDefaultNamespace(namespace) {
     return namespace === NamespaceURI.XHTML;
   }
@@ -30,6 +34,13 @@ class Node extends EventTarget {
   }
   set parentNode(_readonly) {
   }
+  get parentElement() {
+    const parent = this[PARENT];
+    if (!parent || parent.nodeType !== 1) return null;
+    return parent;
+  }
+  set parentElement(_readonly) {
+  }
   get previousSibling() {
     return this[PREV];
   }
@@ -80,17 +91,11 @@ class Node extends EventTarget {
   get textContent() {
     if (isCharacterData(this)) return this.data;
     let text = "";
-    function walk(node) {
+    for (const node of descendants(this)) {
       if (isTextNode(node)) {
         text += node.data;
       }
-      const child2 = node[CHILD];
-      if (child2) walk(child2);
-      const sibling = node[NEXT];
-      if (sibling) walk(sibling);
     }
-    const child = this[CHILD];
-    if (child) walk(child);
     return text;
   }
   set textContent(data) {

package/build/esnext/ParentNode.esnext

@@ -1,7 +1,8 @@
-import { PREV, NEXT, CHILD, HOOKS, NodeType, OWNER_DOCUMENT, PARENT } from './constants.esnext';
+import { PREV, NEXT, CHILD, PARENT, IS_CONNECTED, NodeType, HOOKS, OWNER_DOCUMENT } from './constants.esnext';
 import { ChildNode, toNode } from './ChildNode.esnext';
 import { NodeList } from './NodeList.esnext';
 import { querySelectorAll, querySelector } from './selectors.esnext';
+import { selfAndDescendants } from './shared.esnext';
 
 class ParentNode extends ChildNode {
   childNodes = new NodeList();
@@ -46,8 +47,18 @@ class ParentNode extends ChildNode {
       const children = this.children;
       children.splice(children.indexOf(child), 1);
     }
-    child.disconnectedCallback?.();
-    this[HOOKS].removeChild?.(this, child, childNodesIndex);
+    child[PARENT] = null;
+    child[NEXT] = null;
+    child[PREV] = null;
+    if (this[IS_CONNECTED]) {
+      for (const node of selfAndDescendants(child)) {
+        node[IS_CONNECTED] = false;
+        node.disconnectedCallback?.();
+      }
+    }
+    if (this.nodeType === NodeType.ELEMENT_NODE) {
+      this[HOOKS].removeChild?.(this, child, childNodesIndex);
+    }
   }
   replaceChild(newChild, oldChild) {
     if (oldChild.parentNode !== this) {
@@ -121,8 +132,15 @@ class ParentNode extends ChildNode {
       childNodes.push(child);
       if (isElement) this.children.push(child);
     }
-    child.connectedCallback?.();
-    this[HOOKS].insertChild?.(this, child, insertIndex);
+    if (this[IS_CONNECTED]) {
+      for (const node of selfAndDescendants(child)) {
+        node[IS_CONNECTED] = true;
+        node.connectedCallback?.();
+      }
+    }
+    if (this.nodeType === NodeType.ELEMENT_NODE) {
+      this[HOOKS].insertChild?.(this, child, insertIndex);
+    }
   }
 }