happy-dom 14.12.3 → 15.0.0

package/lib/nodes/node/Node.js

@@ -1,37 +1,76 @@
-var _a, _b, _c, _d, _e, _f, _g, _h, _j;
 import EventTarget from '../../event/EventTarget.js';
 import * as PropertySymbol from '../../PropertySymbol.js';
 import NodeTypeEnum from './NodeTypeEnum.js';
 import NodeDocumentPositionEnum from './NodeDocumentPositionEnum.js';
 import NodeUtility from './NodeUtility.js';
 import NodeList from './NodeList.js';
+import MutationRecord from '../../mutation-observer/MutationRecord.js';
+import MutationTypeEnum from '../../mutation-observer/MutationTypeEnum.js';
+import DOMException from '../../exception/DOMException.js';
+import DOMExceptionNameEnum from '../../exception/DOMExceptionNameEnum.js';
 import NodeFactory from '../NodeFactory.js';
 /**
  * Node.
  */
-class Node extends EventTarget {
+export default class Node extends EventTarget {
+    // This is used when overriding a Node class and set it in a owner document context (used in BrowserWindow.constructor()).
+    static [PropertySymbol.ownerDocument];
+    // Public properties
+    static ELEMENT_NODE = NodeTypeEnum.elementNode;
+    static ATTRIBUTE_NODE = NodeTypeEnum.attributeNode;
+    static TEXT_NODE = NodeTypeEnum.textNode;
+    static CDATA_SECTION_NODE = NodeTypeEnum.cdataSectionNode;
+    static COMMENT_NODE = NodeTypeEnum.commentNode;
+    static DOCUMENT_NODE = NodeTypeEnum.documentNode;
+    static DOCUMENT_TYPE_NODE = NodeTypeEnum.documentTypeNode;
+    static DOCUMENT_FRAGMENT_NODE = NodeTypeEnum.documentFragmentNode;
+    static PROCESSING_INSTRUCTION_NODE = NodeTypeEnum.processingInstructionNode;
+    static DOCUMENT_POSITION_CONTAINED_BY = NodeDocumentPositionEnum.containedBy;
+    static DOCUMENT_POSITION_CONTAINS = NodeDocumentPositionEnum.contains;
+    static DOCUMENT_POSITION_DISCONNECTED = NodeDocumentPositionEnum.disconnect;
+    static DOCUMENT_POSITION_FOLLOWING = NodeDocumentPositionEnum.following;
+    static DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC = NodeDocumentPositionEnum.implementationSpecific;
+    static DOCUMENT_POSITION_PRECEDING = NodeDocumentPositionEnum.preceding;
+    // Internal properties
+    [PropertySymbol.isConnected] = false;
+    [PropertySymbol.ownerDocument];
+    [PropertySymbol.parentNode] = null;
+    [PropertySymbol.nodeType];
+    [PropertySymbol.rootNode] = null;
+    [PropertySymbol.styleNode] = null;
+    [PropertySymbol.textAreaNode] = null;
+    [PropertySymbol.formNode] = null;
+    [PropertySymbol.selectNode] = null;
+    [PropertySymbol.mutationListeners] = [];
+    [PropertySymbol.nodeArray] = [];
+    [PropertySymbol.elementArray] = [];
+    [PropertySymbol.childNodes] = null;
+    [PropertySymbol.assignedToSlot] = null;
+    [PropertySymbol.cache] = {
+        querySelector: new Map(),
+        querySelectorAll: new Map(),
+        matches: new Map(),
+        elementsByTagName: new Map(),
+        elementsByTagNameNS: new Map(),
+        elementByTagName: new Map(),
+        elementById: new Map(),
+        style: null,
+        computedStyle: null
+    };
+    [PropertySymbol.affectsCache] = [];
     /**
      * Constructor.
      */
     constructor() {
         super();
-        // Internal properties
-        this[_a] = false;
-        this[_b] = null;
-        this[_c] = null;
-        this[_d] = null;
-        this[_e] = null;
-        this[_f] = null;
-        this[_g] = null;
-        this[_h] = [];
-        this[_j] = new NodeList();
-        if (this.constructor[PropertySymbol.ownerDocument] !== undefined) {
-            this[PropertySymbol.ownerDocument] = this.constructor[PropertySymbol.ownerDocument];
+        const definedOwnerDocument = this.constructor[PropertySymbol.ownerDocument];
+        if (definedOwnerDocument) {
+            this[PropertySymbol.ownerDocument] = definedOwnerDocument;
         }
         else {
             const ownerDocument = NodeFactory.pullOwnerDocument();
             if (!ownerDocument) {
-                throw new Error('Failed to construct "Node": No owner document in queue. Please use "NodeFactory" to create instances of a Node.');
+                throw new TypeError('Illegal constructor');
             }
             this[PropertySymbol.ownerDocument] = ownerDocument;
         }
@@ -41,7 +80,7 @@ class Node extends EventTarget {
      *
      * @returns `Symbol.toStringTag`.
      */
-    get [(PropertySymbol.ownerDocument, _a = PropertySymbol.isConnected, PropertySymbol.ownerDocument, _b = PropertySymbol.parentNode, PropertySymbol.nodeType, _c = PropertySymbol.rootNode, _d = PropertySymbol.formNode, _e = PropertySymbol.selectNode, _f = PropertySymbol.textAreaNode, _g = PropertySymbol.styleNode, _h = PropertySymbol.observers, _j = PropertySymbol.childNodes, Symbol.toStringTag)]() {
+    get [Symbol.toStringTag]() {
         return this.constructor.name;
     }
     /**
@@ -82,6 +121,9 @@ class Node extends EventTarget {
      * @returns Child nodes list.
      */
     get childNodes() {
+        if (!this[PropertySymbol.childNodes]) {
+            this[PropertySymbol.childNodes] = new NodeList(PropertySymbol.illegalConstructor, this[PropertySymbol.nodeArray]);
+        }
         return this[PropertySymbol.childNodes];
     }
     /**
@@ -131,9 +173,10 @@ class Node extends EventTarget {
      */
     get previousSibling() {
         if (this[PropertySymbol.parentNode]) {
-            const index = this[PropertySymbol.parentNode][PropertySymbol.childNodes].indexOf(this);
+            const nodeArray = this[PropertySymbol.parentNode][PropertySymbol.nodeArray];
+            const index = nodeArray.indexOf(this);
             if (index > 0) {
-                return this[PropertySymbol.parentNode][PropertySymbol.childNodes][index - 1];
+                return nodeArray[index - 1];
             }
         }
         return null;
@@ -145,10 +188,10 @@ class Node extends EventTarget {
      */
     get nextSibling() {
         if (this[PropertySymbol.parentNode]) {
-            const index = this[PropertySymbol.parentNode][PropertySymbol.childNodes].indexOf(this);
-            if (index > -1 &&
-                index + 1 < this[PropertySymbol.parentNode][PropertySymbol.childNodes].length) {
-                return this[PropertySymbol.parentNode][PropertySymbol.childNodes][index + 1];
+            const nodeArray = this[PropertySymbol.parentNode][PropertySymbol.nodeArray];
+            const index = nodeArray.indexOf(this);
+            if (index > -1 && index + 1 < nodeArray.length) {
+                return nodeArray[index + 1];
             }
         }
         return null;
@@ -159,8 +202,9 @@ class Node extends EventTarget {
      * @returns Node.
      */
     get firstChild() {
-        if (this[PropertySymbol.childNodes].length > 0) {
-            return this[PropertySymbol.childNodes][0];
+        const nodeArray = this[PropertySymbol.nodeArray];
+        if (nodeArray.length > 0) {
+            return nodeArray[0];
         }
         return null;
     }
@@ -170,8 +214,9 @@ class Node extends EventTarget {
      * @returns Node.
      */
     get lastChild() {
-        if (this[PropertySymbol.childNodes].length > 0) {
-            return this[PropertySymbol.childNodes][this[PropertySymbol.childNodes].length - 1];
+        const nodeArray = this[PropertySymbol.nodeArray];
+        if (nodeArray.length > 0) {
+            return nodeArray[nodeArray.length - 1];
         }
         return null;
     }
@@ -205,7 +250,7 @@ class Node extends EventTarget {
      * @returns "true" if the node has child nodes.
      */
     hasChildNodes() {
-        return this[PropertySymbol.childNodes].length > 0;
+        return this[PropertySymbol.nodeArray].length > 0;
     }
     /**
      * Returns "true" if this node contains the other node.
@@ -251,6 +296,9 @@ class Node extends EventTarget {
      * @returns Appended node.
      */
     appendChild(node) {
+        if (arguments.length < 1) {
+            throw new TypeError(`Failed to execute 'appendChild' on 'Node': 1 argument required, but only 0 present`);
+        }
         return this[PropertySymbol.appendChild](node);
     }
     /**
@@ -260,6 +308,9 @@ class Node extends EventTarget {
      * @returns Removed node.
      */
     removeChild(node) {
+        if (arguments.length < 1) {
+            throw new TypeError(`Failed to execute 'removeChild' on 'Node': 1 argument required, but only 0 present`);
+        }
         return this[PropertySymbol.removeChild](node);
     }
     /**
@@ -283,6 +334,9 @@ class Node extends EventTarget {
      * @returns Replaced node.
      */
     replaceChild(newChild, oldChild) {
+        if (arguments.length < 2) {
+            throw new TypeError(`Failed to execute 'replaceChild' on 'Node': 2 arguments required, but only ${arguments.length} present.`);
+        }
         return this[PropertySymbol.replaceChild](newChild, oldChild);
     }
     /**
@@ -294,16 +348,20 @@ class Node extends EventTarget {
     [PropertySymbol.cloneNode](deep = false) {
         const clone = NodeFactory.createNode(this[PropertySymbol.ownerDocument], this.constructor);
         // Document has childNodes directly when it is created
-        if (clone[PropertySymbol.childNodes].length) {
-            for (const node of clone[PropertySymbol.childNodes].slice()) {
-                node[PropertySymbol.parentNode].removeChild(node);
+        if (clone[PropertySymbol.nodeArray].length) {
+            const childNodes = clone[PropertySymbol.nodeArray];
+            while (childNodes.length) {
+                clone.removeChild(childNodes[0]);
             }
         }
         if (deep) {
-            for (const childNode of this[PropertySymbol.childNodes]) {
+            for (const childNode of this[PropertySymbol.nodeArray]) {
                 const childClone = childNode.cloneNode(true);
                 childClone[PropertySymbol.parentNode] = clone;
-                clone[PropertySymbol.childNodes].push(childClone);
+                clone[PropertySymbol.nodeArray].push(childClone);
+                if (childClone[PropertySymbol.nodeType] === NodeTypeEnum.elementNode) {
+                    clone[PropertySymbol.elementArray].push(childClone);
+                }
             }
         }
         return clone;
@@ -312,10 +370,50 @@ class Node extends EventTarget {
      * Append a child node to childNodes.
      *
      * @param  node Node to append.
+     * @param [disableValidations=false] "true" to disable validations.
      * @returns Appended node.
      */
-    [PropertySymbol.appendChild](node) {
-        return NodeUtility.appendChild(this, node);
+    [PropertySymbol.appendChild](node, disableValidations = false) {
+        if (!disableValidations) {
+            if (node === this) {
+                throw new DOMException("Failed to execute 'appendChild' on 'Node': Not possible to append a node as a child of itself.");
+            }
+            if (NodeUtility.isInclusiveAncestor(node, this, true)) {
+                throw new DOMException("Failed to execute 'appendChild' on 'Node': The new node is a parent of the node to insert to.", DOMExceptionNameEnum.domException);
+            }
+        }
+        // If the type is DocumentFragment, then the child nodes of if it should be moved instead of the actual node.
+        // See: https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment
+        if (node[PropertySymbol.nodeType] === NodeTypeEnum.documentFragmentNode) {
+            const childNodes = node[PropertySymbol.nodeArray];
+            while (childNodes.length) {
+                this.appendChild(childNodes[0]);
+            }
+            return node;
+        }
+        // Remove the node from its previous parent if it has any.
+        if (node[PropertySymbol.parentNode]) {
+            node[PropertySymbol.parentNode][PropertySymbol.removeChild](node);
+        }
+        node[PropertySymbol.parentNode] = this;
+        node[PropertySymbol.clearCache]();
+        this[PropertySymbol.nodeArray].push(node);
+        if (node[PropertySymbol.nodeType] === NodeTypeEnum.elementNode) {
+            this[PropertySymbol.elementArray].push(node);
+        }
+        node[PropertySymbol.connectedToNode]();
+        // Mutation listeners
+        for (const mutationListener of this[PropertySymbol.mutationListeners]) {
+            if (mutationListener.options?.subtree && mutationListener.callback.deref()) {
+                node[PropertySymbol.observeMutations](mutationListener);
+            }
+        }
+        this[PropertySymbol.reportMutation](new MutationRecord({
+            target: this,
+            type: MutationTypeEnum.childList,
+            addedNodes: [node]
+        }));
+        return node;
     }
     /**
      * Remove Child element from childNodes array.
@@ -324,7 +422,39 @@ class Node extends EventTarget {
      * @returns Removed node.
      */
     [PropertySymbol.removeChild](node) {
-        return NodeUtility.removeChild(this, node);
+        node[PropertySymbol.parentNode] = null;
+        node[PropertySymbol.clearCache]();
+        const index = this[PropertySymbol.nodeArray].indexOf(node);
+        if (index === -1) {
+            throw new DOMException(`Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.`);
+        }
+        this[PropertySymbol.nodeArray].splice(index, 1);
+        if (node[PropertySymbol.nodeType] === NodeTypeEnum.elementNode) {
+            const index = this[PropertySymbol.elementArray].indexOf(node);
+            if (index !== -1) {
+                this[PropertySymbol.elementArray].splice(index, 1);
+            }
+        }
+        if (node[PropertySymbol.assignedToSlot]) {
+            const index = node[PropertySymbol.assignedToSlot][PropertySymbol.assignedNodes].indexOf(node);
+            if (index !== -1) {
+                node[PropertySymbol.assignedToSlot][PropertySymbol.assignedNodes].splice(index, 1);
+            }
+            node[PropertySymbol.assignedToSlot] = null;
+        }
+        node[PropertySymbol.disconnectedFromNode]();
+        // Mutation listeners
+        for (const mutationListener of this[PropertySymbol.mutationListeners]) {
+            if (mutationListener.options?.subtree && mutationListener.callback.deref()) {
+                node[PropertySymbol.unobserveMutations](mutationListener);
+            }
+        }
+        this[PropertySymbol.reportMutation](new MutationRecord({
+            target: this,
+            type: MutationTypeEnum.childList,
+            removedNodes: [node]
+        }));
+        return node;
     }
     /**
      * Inserts a node before another.
@@ -334,7 +464,71 @@ class Node extends EventTarget {
      * @returns Inserted node.
      */
     [PropertySymbol.insertBefore](newNode, referenceNode) {
-        return NodeUtility.insertBefore(this, newNode, referenceNode);
+        if (newNode === referenceNode) {
+            return newNode;
+        }
+        if (NodeUtility.isInclusiveAncestor(newNode, this, true)) {
+            throw new DOMException("Failed to execute 'insertBefore' on 'Node': The new node is a parent of the node to insert to.", DOMExceptionNameEnum.domException);
+        }
+        // If the type is DocumentFragment, then the child nodes of if it should be moved instead of the actual node.
+        // See: https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment
+        if (newNode[PropertySymbol.nodeType] === NodeTypeEnum.documentFragmentNode) {
+            const childNodes = newNode[PropertySymbol.nodeArray];
+            while (childNodes.length > 0) {
+                this.insertBefore(childNodes[0], referenceNode);
+            }
+            return newNode;
+        }
+        // If the referenceNode is null or undefined, then the newNode should be appended to the ancestorNode.
+        // According to spec only null is valid, but browsers support undefined as well.
+        if (!referenceNode) {
+            this.appendChild(newNode);
+            return newNode;
+        }
+        const nodeArray = this[PropertySymbol.nodeArray];
+        // We need to check if the referenceNode is a child of this node before removing it from its parent, as the parent may be the same node and the index would be wrong.
+        if (!nodeArray.includes(referenceNode)) {
+            throw new DOMException("Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.");
+        }
+        if (newNode[PropertySymbol.parentNode]) {
+            newNode[PropertySymbol.parentNode][PropertySymbol.removeChild](newNode);
+        }
+        newNode[PropertySymbol.parentNode] = this;
+        newNode[PropertySymbol.clearCache]();
+        const index = nodeArray.indexOf(referenceNode);
+        if (newNode[PropertySymbol.nodeType] === NodeTypeEnum.elementNode) {
+            const elementArray = this[PropertySymbol.elementArray];
+            if (referenceNode[PropertySymbol.nodeType] === NodeTypeEnum.elementNode) {
+                elementArray.splice(elementArray.indexOf(referenceNode), 0, newNode);
+            }
+            else {
+                let isInserted = false;
+                for (let i = index, max = nodeArray.length; i < max; i++) {
+                    if (nodeArray[i][PropertySymbol.nodeType] === NodeTypeEnum.elementNode) {
+                        elementArray.splice(elementArray.indexOf(nodeArray[i]), 0, newNode);
+                        isInserted = true;
+                        break;
+                    }
+                }
+                if (!isInserted) {
+                    elementArray.push(newNode);
+                }
+            }
+        }
+        nodeArray.splice(index, 0, newNode);
+        newNode[PropertySymbol.connectedToNode]();
+        // Mutation listeners
+        for (const mutationListener of this[PropertySymbol.mutationListeners]) {
+            if (mutationListener.options?.subtree && mutationListener.callback.deref()) {
+                newNode[PropertySymbol.observeMutations](mutationListener);
+            }
+        }
+        this[PropertySymbol.reportMutation](new MutationRecord({
+            target: this,
+            type: MutationTypeEnum.childList,
+            addedNodes: [newNode]
+        }));
+        return newNode;
     }
     /**
      * Replaces a node with another.
@@ -367,115 +561,272 @@ class Node extends EventTarget {
         return `[object ${this.constructor.name}]`;
     }
     /**
-     * Observeres the node.
-     * Used by MutationObserver, but it is not part of the HTML standard.
+     * Observeres mutations on the node.
+     *
+     * Used by MutationObserver and internal logic.
      *
      * @param listener Listener.
      */
-    [PropertySymbol.observe](listener) {
-        this[PropertySymbol.observers].push(listener);
+    [PropertySymbol.observeMutations](listener) {
+        this[PropertySymbol.mutationListeners].push(listener);
         if (listener.options.subtree) {
-            for (const node of this[PropertySymbol.childNodes]) {
-                node[PropertySymbol.observe](listener);
+            for (const node of this[PropertySymbol.nodeArray]) {
+                node[PropertySymbol.observeMutations](listener);
             }
         }
     }
     /**
-     * Stops observing the node.
-     * Used by MutationObserver, but it is not part of the HTML standard.
+     * Stops observing mutations on the node.
+     *
+     * Used by MutationObserver and internal logic.
      *
      * @param listener Listener.
      */
-    [PropertySymbol.unobserve](listener) {
-        const index = this[PropertySymbol.observers].indexOf(listener);
+    [PropertySymbol.unobserveMutations](listener) {
+        const index = this[PropertySymbol.mutationListeners].indexOf(listener);
         if (index !== -1) {
-            this[PropertySymbol.observers].splice(index, 1);
+            this[PropertySymbol.mutationListeners].splice(index, 1);
         }
         if (listener.options.subtree) {
-            for (const node of this[PropertySymbol.childNodes]) {
-                node[PropertySymbol.unobserve](listener);
+            for (const node of this[PropertySymbol.nodeArray]) {
+                node[PropertySymbol.unobserveMutations](listener);
             }
         }
     }
     /**
-     * Connects this element to another element.
+     * Reports a mutation on the node.
+     *
+     * Used by MutationObserver and internal logic.
      *
-     * @param parentNode Parent node.
+     * @param record Mutation record.
      */
-    [PropertySymbol.connectToNode](parentNode = null) {
-        const isConnected = !!parentNode && parentNode[PropertySymbol.isConnected];
-        const formNode = this[PropertySymbol.formNode];
-        const selectNode = this[PropertySymbol.selectNode];
-        const textAreaNode = this[PropertySymbol.textAreaNode];
-        const styleNode = this[PropertySymbol.styleNode];
-        if (this[PropertySymbol.nodeType] !== NodeTypeEnum.documentFragmentNode) {
-            this[PropertySymbol.parentNode] = parentNode;
-            this[PropertySymbol.rootNode] =
-                isConnected && parentNode ? parentNode[PropertySymbol.rootNode] : null;
-            if (this['tagName'] !== 'FORM') {
-                this[PropertySymbol.formNode] = parentNode
-                    ? parentNode[PropertySymbol.formNode]
-                    : null;
-            }
-            if (this['tagName'] !== 'SELECT') {
-                this[PropertySymbol.selectNode] = parentNode
-                    ? parentNode[PropertySymbol.selectNode]
-                    : null;
-            }
-            if (this['tagName'] !== 'TEXTAREA') {
-                this[PropertySymbol.textAreaNode] = parentNode
-                    ? parentNode[PropertySymbol.textAreaNode]
-                    : null;
-            }
-            if (this['tagName'] !== 'STYLE') {
-                this[PropertySymbol.styleNode] = parentNode
-                    ? parentNode[PropertySymbol.styleNode]
-                    : null;
-            }
-        }
-        if (this[PropertySymbol.isConnected] !== isConnected) {
-            this[PropertySymbol.isConnected] = isConnected;
-            if (!isConnected) {
-                if (this[PropertySymbol.ownerDocument][PropertySymbol.activeElement] === this) {
-                    this[PropertySymbol.ownerDocument][PropertySymbol.activeElement] = null;
+    [PropertySymbol.reportMutation](record) {
+        this[PropertySymbol.clearCache]();
+        const mutationListeners = this[PropertySymbol.mutationListeners];
+        if (!mutationListeners.length) {
+            return;
+        }
+        for (let i = 0, max = mutationListeners.length; i < max; i++) {
+            const mutationListener = mutationListeners[i];
+            const callback = mutationListener.callback.deref();
+            if (callback) {
+                switch (record.type) {
+                    case MutationTypeEnum.childList:
+                        if (mutationListener.options.childList) {
+                            callback(record);
+                        }
+                        break;
+                    case MutationTypeEnum.attributes:
+                        if (mutationListener.options.attributes &&
+                            (!mutationListener.options.attributeFilter ||
+                                mutationListener.options.attributeFilter.includes(record.attributeName))) {
+                            callback(record);
+                        }
+                        break;
+                    case MutationTypeEnum.characterData:
+                        if (mutationListener.options?.characterData) {
+                            callback(record);
+                        }
+                        break;
                 }
             }
-            if (isConnected && this.connectedCallback) {
-                const result = this.connectedCallback();
-                /**
-                 * It is common to import dependencies in the connectedCallback() method of web components.
-                 * As Happy DOM doesn't have support for dynamic imports yet, this is a temporary solution to wait for imports in connectedCallback().
-                 *
-                 * @see https://github.com/capricorn86/happy-dom/issues/1442
-                 */
-                if (result instanceof Promise) {
-                    const asyncTaskManager = this[PropertySymbol.ownerDocument][PropertySymbol.ownerWindow][PropertySymbol.asyncTaskManager];
-                    const taskID = asyncTaskManager.startTask();
-                    result
-                        .then(() => asyncTaskManager.endTask(taskID))
-                        .catch(() => asyncTaskManager.endTask(taskID));
+            else {
+                mutationListeners.splice(i, 1);
+                i--;
+                max--;
+            }
+        }
+    }
+    /**
+     * Clears query selector cache.
+     */
+    [PropertySymbol.clearCache]() {
+        const cache = this[PropertySymbol.cache];
+        if (cache.querySelector.size) {
+            for (const item of cache.querySelector.values()) {
+                if (item.result) {
+                    item.result = null;
                 }
             }
-            else if (!isConnected && this.disconnectedCallback) {
-                this.disconnectedCallback();
+            cache.querySelector = new Map();
+        }
+        if (cache.querySelectorAll.size) {
+            for (const item of cache.querySelectorAll.values()) {
+                if (item.result) {
+                    item.result = null;
+                }
             }
-            for (const child of this[PropertySymbol.childNodes]) {
-                child[PropertySymbol.connectToNode](this);
+            cache.querySelectorAll = new Map();
+        }
+        if (cache.matches.size) {
+            for (const item of cache.matches.values()) {
+                if (item.result) {
+                    item.result = null;
+                }
             }
-            // eslint-disable-next-line
-            if (this[PropertySymbol.shadowRoot]) {
-                // eslint-disable-next-line
-                this[PropertySymbol.shadowRoot][PropertySymbol.connectToNode](this);
+            cache.matches = new Map();
+        }
+        if (cache.elementsByTagName.size) {
+            for (const item of cache.elementsByTagName.values()) {
+                if (item.result) {
+                    item.result = null;
+                }
+            }
+            cache.elementsByTagName = new Map();
+        }
+        if (cache.elementsByTagNameNS.size) {
+            for (const item of cache.elementsByTagNameNS.values()) {
+                if (item.result) {
+                    item.result = null;
+                }
+            }
+            cache.elementsByTagNameNS = new Map();
+        }
+        if (cache.elementByTagName.size) {
+            for (const item of cache.elementByTagName.values()) {
+                if (item.result) {
+                    item.result = null;
+                }
+            }
+            cache.elementByTagName = new Map();
+        }
+        if (cache.elementById.size) {
+            for (const item of cache.elementById.values()) {
+                if (item.result) {
+                    item.result = null;
+                }
+            }
+            cache.elementById = new Map();
+        }
+        const affectsCache = this[PropertySymbol.affectsCache];
+        if (affectsCache.length) {
+            for (const item of affectsCache) {
+                item.result = null;
+            }
+            this[PropertySymbol.affectsCache] = [];
+        }
+        // Computed style cache is affected by all mutations.
+        const document = this[PropertySymbol.ownerDocument];
+        if (document && document[PropertySymbol.affectsComputedStyleCache].length) {
+            for (const item of document[PropertySymbol.affectsComputedStyleCache]) {
+                item.result = null;
             }
+            document[PropertySymbol.affectsComputedStyleCache] = [];
         }
-        else if (formNode !== this[PropertySymbol.formNode] ||
-            selectNode !== this[PropertySymbol.selectNode] ||
-            textAreaNode !== this[PropertySymbol.textAreaNode] ||
-            styleNode !== this[PropertySymbol.styleNode]) {
-            for (const child of this[PropertySymbol.childNodes]) {
-                child[PropertySymbol.connectToNode](this);
+    }
+    /**
+     * Called when connected to a node.
+     */
+    [PropertySymbol.connectedToNode]() {
+        const parentNode = this[PropertySymbol.parentNode];
+        const parent = parentNode || this[PropertySymbol.host];
+        if (parentNode) {
+            if (parentNode[PropertySymbol.styleNode] && this[PropertySymbol.tagName] !== 'STYLE') {
+                this[PropertySymbol.styleNode] = parentNode[PropertySymbol.styleNode];
+            }
+            if (parentNode[PropertySymbol.textAreaNode] && this[PropertySymbol.tagName] !== 'TEXTAREA') {
+                this[PropertySymbol.textAreaNode] = parentNode[PropertySymbol.textAreaNode];
+            }
+            if (parentNode[PropertySymbol.formNode] && this[PropertySymbol.tagName] !== 'FORM') {
+                this[PropertySymbol.formNode] = parentNode[PropertySymbol.formNode];
+            }
+            if (parentNode[PropertySymbol.selectNode] && this[PropertySymbol.tagName] !== 'SELECT') {
+                this[PropertySymbol.selectNode] = parentNode[PropertySymbol.selectNode];
             }
         }
+        if (!this[PropertySymbol.isConnected] && parent[PropertySymbol.isConnected]) {
+            this[PropertySymbol.connectedToDocument]();
+        }
+        else if (this[PropertySymbol.isConnected] && !parent[PropertySymbol.isConnected]) {
+            this[PropertySymbol.disconnectedFromDocument]();
+        }
+        const childNodes = this[PropertySymbol.nodeArray];
+        for (let i = 0, max = childNodes.length; i < max; i++) {
+            childNodes[i][PropertySymbol.connectedToNode]();
+        }
+        // eslint-disable-next-line
+        if (this[PropertySymbol.shadowRoot]) {
+            // eslint-disable-next-line
+            this[PropertySymbol.shadowRoot][PropertySymbol.connectedToNode]();
+        }
+    }
+    /**
+     * Called when disconnected from a node.
+     */
+    [PropertySymbol.disconnectedFromNode]() {
+        if (this[PropertySymbol.isConnected]) {
+            this[PropertySymbol.disconnectedFromDocument]();
+        }
+        if (this[PropertySymbol.tagName] !== 'STYLE') {
+            this[PropertySymbol.styleNode] = null;
+        }
+        if (this[PropertySymbol.tagName] !== 'TEXTAREA') {
+            this[PropertySymbol.textAreaNode] = null;
+        }
+        if (this[PropertySymbol.tagName] !== 'FORM') {
+            this[PropertySymbol.formNode] = null;
+        }
+        if (this[PropertySymbol.tagName] !== 'SELECT') {
+            this[PropertySymbol.selectNode] = null;
+        }
+        const childNodes = this[PropertySymbol.nodeArray];
+        for (let i = 0, max = childNodes.length; i < max; i++) {
+            childNodes[i][PropertySymbol.disconnectedFromNode]();
+        }
+        // eslint-disable-next-line
+        if (this[PropertySymbol.shadowRoot]) {
+            // eslint-disable-next-line
+            this[PropertySymbol.shadowRoot][PropertySymbol.disconnectedFromNode]();
+        }
+    }
+    /**
+     * Called when connected to document.
+     */
+    [PropertySymbol.connectedToDocument]() {
+        this[PropertySymbol.isConnected] = true;
+        if (this[PropertySymbol.nodeType] !== NodeTypeEnum.documentFragmentNode) {
+            this[PropertySymbol.rootNode] = this[PropertySymbol.parentNode][PropertySymbol.rootNode];
+        }
+        // eslint-disable-next-line
+        if (this[PropertySymbol.shadowRoot]) {
+            // eslint-disable-next-line
+            this[PropertySymbol.shadowRoot][PropertySymbol.connectedToDocument]();
+        }
+        if (this.connectedCallback) {
+            const result = this.connectedCallback();
+            /**
+             * It is common to import dependencies in the connectedCallback() method of web components.
+             * As Happy DOM doesn't have support for dynamic imports yet, this is a temporary solution to wait for imports in connectedCallback().
+             *
+             * @see https://github.com/capricorn86/happy-dom/issues/1442
+             */
+            if (result instanceof Promise) {
+                const asyncTaskManager = this[PropertySymbol.ownerDocument][PropertySymbol.ownerWindow][PropertySymbol.asyncTaskManager];
+                const taskID = asyncTaskManager.startTask();
+                result
+                    .then(() => asyncTaskManager.endTask(taskID))
+                    .catch(() => asyncTaskManager.endTask(taskID));
+            }
+        }
+    }
+    /**
+     * Called when disconnected from document.
+     * @param e
+     */
+    [PropertySymbol.disconnectedFromDocument]() {
+        this[PropertySymbol.isConnected] = false;
+        this[PropertySymbol.rootNode] = null;
+        if (this[PropertySymbol.ownerDocument][PropertySymbol.activeElement] === this) {
+            this[PropertySymbol.ownerDocument][PropertySymbol.activeElement] = null;
+        }
+        // eslint-disable-next-line
+        if (this[PropertySymbol.shadowRoot]) {
+            // eslint-disable-next-line
+            this[PropertySymbol.shadowRoot][PropertySymbol.disconnectedFromDocument]();
+        }
+        if (this.disconnectedCallback) {
+            this.disconnectedCallback();
+        }
     }
     /**
      * Reports the position of its argument node relative to the node on which it is called.
@@ -521,7 +872,7 @@ class Node extends EventTarget {
                 /**
                  * 5.2.1. For each attr in node2’s attribute list:
                  */
-                for (const attr of Object.values(node2[PropertySymbol.attributes])) {
+                for (const attr of Array.from(node2[PropertySymbol.attributes][PropertySymbol.namedItems].values())) {
                     /**
                      * 5.2.1.1. If attr equals attr1, then return the result of adding DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC and DOCUMENT_POSITION_PRECEDING.
                      */
@@ -595,7 +946,7 @@ class Node extends EventTarget {
         const node1Node = reverseArrayIndex(node1Ancestors, commonAncestorIndex + 1);
         const computeNodeIndexes = (nodes) => {
             for (const childNode of nodes) {
-                computeNodeIndexes(childNode[PropertySymbol.childNodes]);
+                computeNodeIndexes(childNode[PropertySymbol.nodeArray]);
                 if (childNode === node2Node) {
                     node2Index = indexes;
                 }
@@ -608,7 +959,7 @@ class Node extends EventTarget {
                 indexes++;
             }
         };
-        computeNodeIndexes(commonAncestor[PropertySymbol.childNodes]);
+        computeNodeIndexes(commonAncestor[PropertySymbol.nodeArray]);
         /**
          * 9. If node1 is preceding node2, then return DOCUMENT_POSITION_PRECEDING.
          * 10. Return DOCUMENT_POSITION_FOLLOWING.
@@ -658,23 +1009,6 @@ class Node extends EventTarget {
         return this === node;
     }
 }
-// Public properties
-Node.ELEMENT_NODE = NodeTypeEnum.elementNode;
-Node.ATTRIBUTE_NODE = NodeTypeEnum.attributeNode;
-Node.TEXT_NODE = NodeTypeEnum.textNode;
-Node.CDATA_SECTION_NODE = NodeTypeEnum.cdataSectionNode;
-Node.COMMENT_NODE = NodeTypeEnum.commentNode;
-Node.DOCUMENT_NODE = NodeTypeEnum.documentNode;
-Node.DOCUMENT_TYPE_NODE = NodeTypeEnum.documentTypeNode;
-Node.DOCUMENT_FRAGMENT_NODE = NodeTypeEnum.documentFragmentNode;
-Node.PROCESSING_INSTRUCTION_NODE = NodeTypeEnum.processingInstructionNode;
-Node.DOCUMENT_POSITION_CONTAINED_BY = NodeDocumentPositionEnum.containedBy;
-Node.DOCUMENT_POSITION_CONTAINS = NodeDocumentPositionEnum.contains;
-Node.DOCUMENT_POSITION_DISCONNECTED = NodeDocumentPositionEnum.disconnect;
-Node.DOCUMENT_POSITION_FOLLOWING = NodeDocumentPositionEnum.following;
-Node.DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC = NodeDocumentPositionEnum.implementationSpecific;
-Node.DOCUMENT_POSITION_PRECEDING = NodeDocumentPositionEnum.preceding;
-export default Node;
 // According to the spec, these properties should be on the prototype.
 Node.prototype.ELEMENT_NODE = NodeTypeEnum.elementNode;
 Node.prototype.ATTRIBUTE_NODE = NodeTypeEnum.attributeNode;