happy-dom 14.12.3 → 15.1.0

package/cjs/nodes/element/Element.cjs

@@ -25,86 +25,107 @@ var __importStar = (this && this.__importStar) || function (mod) {
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
-var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
 Object.defineProperty(exports, "__esModule", { value: true });
 const Node_js_1 = __importDefault(require("../node/Node.cjs"));
 const PropertySymbol = __importStar(require("../../PropertySymbol.cjs"));
 const DOMRect_js_1 = __importDefault(require("./DOMRect.cjs"));
-const DOMTokenList_js_1 = __importDefault(require("../../dom-token-list/DOMTokenList.cjs"));
+const DOMTokenList_js_1 = __importDefault(require("./DOMTokenList.cjs"));
 const QuerySelector_js_1 = __importDefault(require("../../query-selector/QuerySelector.cjs"));
 const XMLParser_js_1 = __importDefault(require("../../xml-parser/XMLParser.cjs"));
 const XMLSerializer_js_1 = __importDefault(require("../../xml-serializer/XMLSerializer.cjs"));
 const ChildNodeUtility_js_1 = __importDefault(require("../child-node/ChildNodeUtility.cjs"));
 const ParentNodeUtility_js_1 = __importDefault(require("../parent-node/ParentNodeUtility.cjs"));
 const NonDocumentChildNodeUtility_js_1 = __importDefault(require("../child-node/NonDocumentChildNodeUtility.cjs"));
-const DOMException_js_1 = __importDefault(require("../../exception/DOMException.cjs"));
 const HTMLCollection_js_1 = __importDefault(require("./HTMLCollection.cjs"));
 const DOMRectList_js_1 = __importDefault(require("./DOMRectList.cjs"));
-const ElementUtility_js_1 = __importDefault(require("./ElementUtility.cjs"));
+const NamedNodeMap_js_1 = __importDefault(require("./NamedNodeMap.cjs"));
+const Event_js_1 = __importDefault(require("../../event/Event.cjs"));
 const EventPhaseEnum_js_1 = __importDefault(require("../../event/EventPhaseEnum.cjs"));
-const ElementNamedNodeMap_js_1 = __importDefault(require("./ElementNamedNodeMap.cjs"));
 const WindowErrorUtility_js_1 = __importDefault(require("../../window/WindowErrorUtility.cjs"));
-const WindowBrowserSettingsReader_js_1 = __importDefault(require("../../window/WindowBrowserSettingsReader.cjs"));
+const WindowBrowserContext_js_1 = __importDefault(require("../../window/WindowBrowserContext.cjs"));
 const BrowserErrorCaptureEnum_js_1 = __importDefault(require("../../browser/enums/BrowserErrorCaptureEnum.cjs"));
-const NodeFactory_js_1 = __importDefault(require("../NodeFactory.cjs"));
 const NodeTypeEnum_js_1 = __importDefault(require("../node/NodeTypeEnum.cjs"));
+const MutationRecord_js_1 = __importDefault(require("../../mutation-observer/MutationRecord.cjs"));
+const MutationTypeEnum_js_1 = __importDefault(require("../../mutation-observer/MutationTypeEnum.cjs"));
+const NamespaceURI_js_1 = __importDefault(require("../../config/NamespaceURI.cjs"));
+const NamedNodeMapProxyFactory_js_1 = __importDefault(require("./NamedNodeMapProxyFactory.cjs"));
+const NodeFactory_js_1 = __importDefault(require("../NodeFactory.cjs"));
 /**
  * Element.
  */
 class Element extends Node_js_1.default {
+    // ObservedAttributes should only be called once by CustomElementRegistry (see #117)
+    // CustomElementRegistry will therefore populate "[PropertySymbol.observedAttributes]" when CustomElementRegistry.define() is called
+    static [PropertySymbol.observedAttributes];
+    static [PropertySymbol.tagName] = null;
+    static [PropertySymbol.localName] = null;
+    static [PropertySymbol.namespaceURI] = null;
+    static observedAttributes;
+    // Events
+    oncancel = null;
+    onerror = null;
+    onscroll = null;
+    onselect = null;
+    onwheel = null;
+    oncopy = null;
+    oncut = null;
+    onpaste = null;
+    oncompositionend = null;
+    oncompositionstart = null;
+    oncompositionupdate = null;
+    onblur = null;
+    onfocus = null;
+    onfocusin = null;
+    onfocusout = null;
+    onfullscreenchange = null;
+    onfullscreenerror = null;
+    onkeydown = null;
+    onkeyup = null;
+    onauxclick = null;
+    onclick = null;
+    oncontextmenu = null;
+    ondblclick = null;
+    onmousedown = null;
+    onmouseenter = null;
+    onmouseleave = null;
+    onmousemove = null;
+    onmouseout = null;
+    onmouseover = null;
+    onmouseup = null;
+    ontouchcancel = null;
+    ontouchend = null;
+    ontouchmove = null;
+    ontouchstart = null;
+    // Internal properties
+    [PropertySymbol.classList] = null;
+    [PropertySymbol.isValue] = null;
+    [PropertySymbol.nodeType] = NodeTypeEnum_js_1.default.elementNode;
+    [PropertySymbol.prefix] = null;
+    [PropertySymbol.shadowRoot] = null;
+    [PropertySymbol.scrollHeight] = 0;
+    [PropertySymbol.scrollWidth] = 0;
+    [PropertySymbol.scrollTop] = 0;
+    [PropertySymbol.scrollLeft] = 0;
+    [PropertySymbol.attributes] = new NamedNodeMap_js_1.default(this);
+    [PropertySymbol.attributesProxy] = null;
+    [PropertySymbol.children] = null;
+    [PropertySymbol.computedStyle] = null;
+    /**
+     * Constructor.
+     */
     constructor() {
-        super(...arguments);
-        // Events
-        this.oncancel = null;
-        this.onerror = null;
-        this.onscroll = null;
-        this.onselect = null;
-        this.onwheel = null;
-        this.oncopy = null;
-        this.oncut = null;
-        this.onpaste = null;
-        this.oncompositionend = null;
-        this.oncompositionstart = null;
-        this.oncompositionupdate = null;
-        this.onblur = null;
-        this.onfocus = null;
-        this.onfocusin = null;
-        this.onfocusout = null;
-        this.onfullscreenchange = null;
-        this.onfullscreenerror = null;
-        this.onkeydown = null;
-        this.onkeyup = null;
-        this.onauxclick = null;
-        this.onclick = null;
-        this.oncontextmenu = null;
-        this.ondblclick = null;
-        this.onmousedown = null;
-        this.onmouseenter = null;
-        this.onmouseleave = null;
-        this.onmousemove = null;
-        this.onmouseout = null;
-        this.onmouseover = null;
-        this.onmouseup = null;
-        this.ontouchcancel = null;
-        this.ontouchend = null;
-        this.ontouchmove = null;
-        this.ontouchstart = null;
-        // Internal properties
-        this[_d] = new HTMLCollection_js_1.default();
-        this[_e] = null;
-        this[_f] = null;
-        this[_g] = null;
-        this[_h] = NodeTypeEnum_js_1.default.elementNode;
-        this[_j] = this.constructor[PropertySymbol.tagName] || null;
-        this[_k] = this.constructor[PropertySymbol.localName] || null;
-        this[_l] = null;
-        this[_m] = null;
-        this[_o] = 0;
-        this[_p] = 0;
-        this[_q] = 0;
-        this[_r] = 0;
-        this[_s] = new ElementNamedNodeMap_js_1.default(this);
-        this[_t] = this.constructor[PropertySymbol.namespaceURI] || null;
+        super();
+        // CustomElementRegistry will populate the properties upon calling "CustomElementRegistry.define()".
+        // Elements that can be constructed with the "new" keyword (without using "Document.createElement()") will also populate the properties.
+        if (!this[PropertySymbol.tagName]) {
+            this[PropertySymbol.tagName] = null;
+        }
+        if (!this[PropertySymbol.localName]) {
+            this[PropertySymbol.localName] = null;
+        }
+        if (!this[PropertySymbol.namespaceURI]) {
+            this[PropertySymbol.namespaceURI] = null;
+        }
     }
     /**
      * Returns tag name.
@@ -185,7 +206,10 @@ class Element extends Node_js_1.default {
      * @returns Attributes.
      */
     get attributes() {
-        return this[PropertySymbol.attributes];
+        if (!this[PropertySymbol.attributesProxy]) {
+            this[PropertySymbol.attributesProxy] = NamedNodeMapProxyFactory_js_1.default.createProxy(this[PropertySymbol.attributes]);
+        }
+        return this[PropertySymbol.attributesProxy];
     }
     /**
      * Returns namespace URI.
@@ -199,6 +223,10 @@ class Element extends Node_js_1.default {
      * Returns element children.
      */
     get children() {
+        if (!this[PropertySymbol.children]) {
+            const elements = this[PropertySymbol.elementArray];
+            this[PropertySymbol.children] = new HTMLCollection_js_1.default(PropertySymbol.illegalConstructor, () => elements);
+        }
         return this[PropertySymbol.children];
     }
     /**
@@ -299,7 +327,7 @@ class Element extends Node_js_1.default {
      */
     get textContent() {
         let result = '';
-        for (const childNode of this[PropertySymbol.childNodes]) {
+        for (const childNode of this[PropertySymbol.nodeArray]) {
             if (childNode[PropertySymbol.nodeType] === NodeTypeEnum_js_1.default.elementNode ||
                 childNode[PropertySymbol.nodeType] === NodeTypeEnum_js_1.default.textNode) {
                 result += childNode.textContent;
@@ -313,8 +341,9 @@ class Element extends Node_js_1.default {
      * @param textContent Text content.
      */
     set textContent(textContent) {
-        for (const child of this[PropertySymbol.childNodes].slice()) {
-            this.removeChild(child);
+        const childNodes = this[PropertySymbol.nodeArray];
+        while (childNodes.length) {
+            this.removeChild(childNodes[0]);
         }
         if (textContent) {
             this.appendChild(this[PropertySymbol.ownerDocument].createTextNode(textContent));
@@ -326,7 +355,7 @@ class Element extends Node_js_1.default {
      * @returns HTML.
      */
     get innerHTML() {
-        return this.getInnerHTML();
+        return this.getHTML();
     }
     /**
      * Sets inner HTML.
@@ -334,8 +363,9 @@ class Element extends Node_js_1.default {
      * @param html HTML.
      */
     set innerHTML(html) {
-        for (const child of this[PropertySymbol.childNodes].slice()) {
-            this.removeChild(child);
+        const childNodes = this[PropertySymbol.nodeArray];
+        while (childNodes.length) {
+            this.removeChild(childNodes[0]);
         }
         XMLParser_js_1.default.parse(this[PropertySymbol.ownerDocument], html, { rootNode: this });
     }
@@ -345,7 +375,7 @@ class Element extends Node_js_1.default {
      * @returns HTML.
      */
     get outerHTML() {
-        return new XMLSerializer_js_1.default({ escapeEntities: false }).serializeToString(this);
+        return new XMLSerializer_js_1.default().serializeToString(this);
     }
     /**
      * Returns outer HTML.
@@ -356,28 +386,29 @@ class Element extends Node_js_1.default {
         this.replaceWith(html);
     }
     /**
-     * First element child.
+     * Last element child.
      *
      * @returns Element.
      */
-    get firstElementChild() {
-        return this[PropertySymbol.children][0] ?? null;
+    get childElementCount() {
+        return this[PropertySymbol.elementArray].length;
     }
     /**
-     * Last element child.
+     * First element child.
      *
      * @returns Element.
      */
-    get lastElementChild() {
-        return this[PropertySymbol.children][this[PropertySymbol.children].length - 1] ?? null;
+    get firstElementChild() {
+        return this[PropertySymbol.elementArray][0] ?? null;
     }
     /**
      * Last element child.
      *
      * @returns Element.
      */
-    get childElementCount() {
-        return this[PropertySymbol.children].length;
+    get lastElementChild() {
+        const children = this[PropertySymbol.elementArray];
+        return children[children.length - 1] ?? null;
     }
     /**
      * Returns slot.
@@ -398,21 +429,43 @@ class Element extends Node_js_1.default {
     /**
      * Returns inner HTML and optionally the content of shadow roots.
      *
-     * This is a feature implemented in Chromium, but not supported by Mozilla yet.
-     *
-     * @see https://web.dev/declarative-shadow-dom/
-     * @see https://chromestatus.com/feature/5191745052606464
+     * @deprecated
      * @param [options] Options.
      * @param [options.includeShadowRoots] Set to "true" to include shadow roots.
      * @returns HTML.
      */
     getInnerHTML(options) {
-        const xmlSerializer = new XMLSerializer_js_1.default({
-            includeShadowRoots: options && options.includeShadowRoots,
-            escapeEntities: false
-        });
+        const xmlSerializer = new XMLSerializer_js_1.default();
+        if (options?.includeShadowRoots) {
+            xmlSerializer[PropertySymbol.options].allShadowRoots = true;
+        }
         let xml = '';
-        for (const node of this[PropertySymbol.childNodes]) {
+        for (const node of this[PropertySymbol.nodeArray]) {
+            xml += xmlSerializer.serializeToString(node);
+        }
+        return xml;
+    }
+    /**
+     * Returns inner HTML and optionally the content of shadow roots.
+     *
+     * @param [options] Options.
+     * @param [options.serializableShadowRoots] A boolean value that specifies whether to include serializable shadow roots. The default value is false.
+     * @param [options.shadowRoots] An array of ShadowRoot objects to serialize. These are included regardless of whether they are marked as serializable, or if they are open or closed. The default value is an empty array.
+     * @returns HTML.
+     */
+    getHTML(options) {
+        const xmlSerializer = new XMLSerializer_js_1.default();
+        if (options) {
+            if (options.serializableShadowRoots) {
+                xmlSerializer[PropertySymbol.options].serializableShadowRoots =
+                    options.serializableShadowRoots;
+            }
+            if (options.shadowRoots) {
+                xmlSerializer[PropertySymbol.options].shadowRoots = options.shadowRoots;
+            }
+        }
+        let xml = '';
+        for (const node of this[PropertySymbol.nodeArray]) {
             xml += xmlSerializer.serializeToString(node);
         }
         return xml;
@@ -420,45 +473,20 @@ class Element extends Node_js_1.default {
     /**
      * @override
      */
-    [(PropertySymbol.observedAttributes, _a = PropertySymbol.tagName, _b = PropertySymbol.localName, _c = PropertySymbol.namespaceURI, _d = PropertySymbol.children, _e = PropertySymbol.classList, _f = PropertySymbol.isValue, _g = PropertySymbol.computedStyle, _h = PropertySymbol.nodeType, _j = PropertySymbol.tagName, _k = PropertySymbol.localName, _l = PropertySymbol.prefix, _m = PropertySymbol.shadowRoot, _o = PropertySymbol.scrollHeight, _p = PropertySymbol.scrollWidth, _q = PropertySymbol.scrollTop, _r = PropertySymbol.scrollLeft, _s = PropertySymbol.attributes, _t = PropertySymbol.namespaceURI, PropertySymbol.cloneNode)](deep = false) {
+    [PropertySymbol.cloneNode](deep = false) {
         const clone = super[PropertySymbol.cloneNode](deep);
         clone[PropertySymbol.tagName] = this[PropertySymbol.tagName];
         clone[PropertySymbol.localName] = this[PropertySymbol.localName];
         clone[PropertySymbol.namespaceURI] = this[PropertySymbol.namespaceURI];
-        for (let i = 0, max = this[PropertySymbol.attributes].length; i < max; i++) {
-            const attribute = this[PropertySymbol.attributes][i];
-            clone[PropertySymbol.attributes].setNamedItem(Object.assign(this[PropertySymbol.ownerDocument].createAttributeNS(attribute[PropertySymbol.namespaceURI], attribute[PropertySymbol.name]), attribute));
-        }
-        if (deep) {
-            for (const node of clone[PropertySymbol.childNodes]) {
-                if (node[PropertySymbol.nodeType] === NodeTypeEnum_js_1.default.elementNode) {
-                    clone[PropertySymbol.children].push(node);
-                }
-            }
+        if (this[PropertySymbol.shadowRoot]?.[PropertySymbol.clonable]) {
+            clone[PropertySymbol.shadowRoot] = this[PropertySymbol.shadowRoot].cloneNode(deep);
+            clone[PropertySymbol.shadowRoot][PropertySymbol.host] = clone;
+        }
+        for (const item of this[PropertySymbol.attributes][PropertySymbol.namespaceItems].values()) {
+            clone[PropertySymbol.attributes].setNamedItem(item.cloneNode());
         }
         return clone;
     }
-    /**
-     * @override
-     */
-    [PropertySymbol.appendChild](node) {
-        // We do not call super here as this will be handled by ElementUtility to improve performance by avoiding validation and other checks.
-        return ElementUtility_js_1.default.appendChild(this, node);
-    }
-    /**
-     * @override
-     */
-    [PropertySymbol.removeChild](node) {
-        // We do not call super here as this will be handled by ElementUtility to improve performance by avoiding validation and other checks.
-        return ElementUtility_js_1.default.removeChild(this, node);
-    }
-    /**
-     * @override
-     */
-    [PropertySymbol.insertBefore](newNode, referenceNode) {
-        // We do not call super here as this will be handled by ElementUtility to improve performance by avoiding validation and other checks.
-        return ElementUtility_js_1.default.insertBefore(this, newNode, referenceNode);
-    }
     /**
      * Removes the node from its parent.
      */
@@ -548,8 +576,9 @@ class Element extends Node_js_1.default {
      * @param text HTML string to insert.
      */
     insertAdjacentHTML(position, text) {
-        for (const node of (XMLParser_js_1.default.parse(this[PropertySymbol.ownerDocument], text))[PropertySymbol.childNodes].slice()) {
-            this.insertAdjacentElement(position, node);
+        const childNodes = (XMLParser_js_1.default.parse(this[PropertySymbol.ownerDocument], text))[PropertySymbol.nodeArray];
+        while (childNodes.length) {
+            this.insertAdjacentElement(position, childNodes[0]);
         }
     }
     /**
@@ -572,9 +601,13 @@ class Element extends Node_js_1.default {
      * @param value Value.
      */
     setAttribute(name, value) {
-        const attribute = this[PropertySymbol.ownerDocument].createAttributeNS(null, name);
+        const namespaceURI = this[PropertySymbol.namespaceURI];
+        // TODO: Is it correct to check for namespaceURI === NamespaceURI.svg?
+        const attribute = namespaceURI === NamespaceURI_js_1.default.svg
+            ? this[PropertySymbol.ownerDocument].createAttributeNS(null, name)
+            : this[PropertySymbol.ownerDocument].createAttribute(name);
         attribute[PropertySymbol.value] = String(value);
-        this.setAttributeNode(attribute);
+        this[PropertySymbol.attributes].setNamedItem(attribute);
     }
     /**
      * Sets a namespace attribute.
@@ -586,7 +619,7 @@ class Element extends Node_js_1.default {
     setAttributeNS(namespaceURI, name, value) {
         const attribute = this[PropertySymbol.ownerDocument].createAttributeNS(namespaceURI, name);
         attribute[PropertySymbol.value] = String(value);
-        this.setAttributeNode(attribute);
+        this[PropertySymbol.attributes].setNamedItemNS(attribute);
     }
     /**
      * Returns attribute names.
@@ -594,11 +627,11 @@ class Element extends Node_js_1.default {
      * @returns Attribute names.
      */
     getAttributeNames() {
-        const attributeNames = [];
-        for (let i = 0, max = this[PropertySymbol.attributes].length; i < max; i++) {
-            attributeNames.push(this[PropertySymbol.attributes][i][PropertySymbol.name]);
+        const names = [];
+        for (const item of this[PropertySymbol.attributes][PropertySymbol.namedItems].values()) {
+            names.push(item[PropertySymbol.name]);
         }
-        return attributeNames;
+        return names;
     }
     /**
      * Returns attribute value.
@@ -606,7 +639,7 @@ class Element extends Node_js_1.default {
      * @param name Name.
      */
     getAttribute(name) {
-        const attribute = this.getAttributeNode(name);
+        const attribute = this[PropertySymbol.attributes].getNamedItem(name);
         if (attribute) {
             return attribute[PropertySymbol.value];
         }
@@ -621,12 +654,12 @@ class Element extends Node_js_1.default {
      */
     toggleAttribute(name, force) {
         name = name.toLowerCase();
-        const attribute = this.getAttributeNode(name);
+        const attribute = this[PropertySymbol.attributes].getNamedItem(name);
         if (attribute) {
             if (force === true) {
                 return true;
             }
-            this.removeAttributeNode(attribute);
+            this[PropertySymbol.attributes][PropertySymbol.removeNamedItem](attribute);
             return false;
         }
         if (force === false) {
@@ -673,7 +706,7 @@ class Element extends Node_js_1.default {
      * @returns "true" if the element has attributes.
      */
     hasAttributes() {
-        return this[PropertySymbol.attributes].length > 0;
+        return this[PropertySymbol.attributes][PropertySymbol.namespaceItems].size > 0;
     }
     /**
      * Removes an attribute.
@@ -681,11 +714,9 @@ class Element extends Node_js_1.default {
      * @param name Name.
      */
     removeAttribute(name) {
-        try {
-            this[PropertySymbol.attributes].removeNamedItem(name);
-        }
-        catch (error) {
-            // Ignore DOMException when the attribute does not exist.
+        const item = this[PropertySymbol.attributes].getNamedItem(name);
+        if (item) {
+            this[PropertySymbol.attributes][PropertySymbol.removeNamedItem](item);
         }
     }
     /**
@@ -695,24 +726,46 @@ class Element extends Node_js_1.default {
      * @param localName Local name.
      */
     removeAttributeNS(namespace, localName) {
-        this[PropertySymbol.attributes].removeNamedItemNS(namespace, localName);
+        const item = this[PropertySymbol.attributes].getNamedItemNS(namespace, localName);
+        if (item) {
+            this[PropertySymbol.attributes][PropertySymbol.removeNamedItem](item);
+        }
     }
     /**
      * Attaches a shadow root.
      *
      * @param init Shadow root init.
      * @param init.mode Shadow root mode.
+     * @param [init.clonable] Clonable.
+     * @param [init.delegateFocus] Delegate focus.
+     * @param [init.serializable] Serializable.
+     * @param [init.slotAssignment] Slot assignment.
      * @returns Shadow root.
      */
     attachShadow(init) {
+        const window = this[PropertySymbol.window];
+        if (!init) {
+            throw new window.TypeError("Failed to execute 'attachShadow' on 'Element': 1 argument required, but only 0 present.");
+        }
+        if (!init.mode) {
+            throw new window.TypeError("Failed to execute 'attachShadow' on 'Element': Failed to read the 'mode' property from 'ShadowRootInit': Required member is undefined.");
+        }
+        if (init.mode !== 'open' && init.mode !== 'closed') {
+            throw new window.TypeError(`Failed to execute 'attachShadow' on 'Element': Failed to read the 'mode' property from 'ShadowRootInit': The provided value '${init.mode}' is not a valid enum value of type ShadowRootMode.`);
+        }
         if (this[PropertySymbol.shadowRoot]) {
-            throw new DOMException_js_1.default('Shadow root has already been attached.');
+            throw new window.DOMException("Failed to execute 'attachShadow' on 'Element': Shadow root cannot be created on a host which already hosts a shadow tree.");
         }
-        const shadowRoot = NodeFactory_js_1.default.createNode(this[PropertySymbol.ownerDocument], this[PropertySymbol.ownerDocument][PropertySymbol.ownerWindow].ShadowRoot);
+        const shadowRoot = NodeFactory_js_1.default.createNode(this[PropertySymbol.ownerDocument], this[PropertySymbol.window].ShadowRoot);
         this[PropertySymbol.shadowRoot] = shadowRoot;
         shadowRoot[PropertySymbol.host] = this;
         shadowRoot[PropertySymbol.mode] = init.mode;
-        shadowRoot[PropertySymbol.connectToNode](this);
+        shadowRoot[PropertySymbol.clonable] = !!init.clonable;
+        shadowRoot[PropertySymbol.delegatesFocus] = !!init.delegateFocus;
+        shadowRoot[PropertySymbol.serializable] = !!init.serializable;
+        shadowRoot[PropertySymbol.slotAssignment] =
+            init.slotAssignment === 'manual' ? 'manual' : 'named';
+        shadowRoot[PropertySymbol.connectedToNode]();
         return this[PropertySymbol.shadowRoot];
     }
     /**
@@ -860,16 +913,11 @@ class Element extends Node_js_1.default {
      * @returns Removed attribute.
      */
     removeAttributeNode(attribute) {
-        return this[PropertySymbol.attributes].removeNamedItem(attribute[PropertySymbol.name]);
-    }
-    /**
-     * Removes an Attr node.
-     *
-     * @param attribute Attribute.
-     * @returns Removed attribute.
-     */
-    removeAttributeNodeNS(attribute) {
-        return this[PropertySymbol.attributes].removeNamedItemNS(attribute[PropertySymbol.namespaceURI], attribute.localName);
+        if (attribute[PropertySymbol.ownerElement] !== this) {
+            throw new this[PropertySymbol.window].DOMException("Failed to execute 'removeAttributeNode' on 'Element': The node provided is owned by another element.");
+        }
+        this[PropertySymbol.attributes][PropertySymbol.removeNamedItem](attribute);
+        return attribute;
     }
     /**
      * Scrolls to a particular set of coordinates.
@@ -880,7 +928,7 @@ class Element extends Node_js_1.default {
     scroll(x, y) {
         if (typeof x === 'object') {
             if (x.behavior === 'smooth') {
-                this[PropertySymbol.ownerDocument][PropertySymbol.ownerWindow].setTimeout(() => {
+                this[PropertySymbol.window].setTimeout(() => {
                     if (x.top !== undefined) {
                         this.scrollTop = x.top;
                     }
@@ -925,29 +973,262 @@ class Element extends Node_js_1.default {
      */
     dispatchEvent(event) {
         const returnValue = super.dispatchEvent(event);
-        const browserSettings = WindowBrowserSettingsReader_js_1.default.getSettings(this[PropertySymbol.ownerDocument][PropertySymbol.ownerWindow]);
+        const browserSettings = new WindowBrowserContext_js_1.default(this[PropertySymbol.window]).getSettings();
         if (browserSettings &&
             !browserSettings.disableJavaScriptEvaluation &&
-            (event.eventPhase === EventPhaseEnum_js_1.default.atTarget ||
-                event.eventPhase === EventPhaseEnum_js_1.default.bubbling) &&
+            event.eventPhase === EventPhaseEnum_js_1.default.none &&
             !event[PropertySymbol.immediatePropagationStopped]) {
             const attribute = this.getAttribute('on' + event.type);
             if (attribute && !event[PropertySymbol.immediatePropagationStopped]) {
-                const code = `//# sourceURL=${this[PropertySymbol.ownerDocument][PropertySymbol.ownerWindow].location.href}\n${attribute}`;
+                const code = `//# sourceURL=${this[PropertySymbol.window].location.href}\n${attribute}`;
                 if (browserSettings.disableErrorCapturing ||
                     browserSettings.errorCapture !== BrowserErrorCaptureEnum_js_1.default.tryAndCatch) {
-                    this[PropertySymbol.ownerDocument][PropertySymbol.ownerWindow].eval(code);
+                    this[PropertySymbol.window].eval(code);
                 }
                 else {
-                    WindowErrorUtility_js_1.default.captureError(this[PropertySymbol.ownerDocument][PropertySymbol.ownerWindow], () => this[PropertySymbol.ownerDocument][PropertySymbol.ownerWindow].eval(code));
+                    WindowErrorUtility_js_1.default.captureError(this[PropertySymbol.window], () => this[PropertySymbol.window].eval(code));
                 }
             }
         }
         return returnValue;
     }
+    /**
+     * @override
+     */
+    [PropertySymbol.appendChild](node, isDuringParsing = false) {
+        const returnValue = super[PropertySymbol.appendChild](node, isDuringParsing);
+        this.#onSlotChange(node);
+        return returnValue;
+    }
+    /**
+     * @override
+     */
+    [PropertySymbol.removeChild](node) {
+        const returnValue = super[PropertySymbol.removeChild](node);
+        this.#onSlotChange(node);
+        return returnValue;
+    }
+    /**
+     * @override
+     */
+    [PropertySymbol.insertBefore](newNode, referenceNode) {
+        const returnValue = super[PropertySymbol.insertBefore](newNode, referenceNode);
+        this.#onSlotChange(newNode);
+        return returnValue;
+    }
+    /**
+     * Triggered when an attribute is set.
+     *
+     * @param attribute Attribute.
+     * @param replacedAttribute Replaced attribute.
+     */
+    [PropertySymbol.onSetAttribute](attribute, replacedAttribute) {
+        if (!attribute[PropertySymbol.name]) {
+            return null;
+        }
+        const oldValue = replacedAttribute ? replacedAttribute[PropertySymbol.value] : null;
+        if (attribute[PropertySymbol.name] === 'slot' &&
+            this[PropertySymbol.parentNode] &&
+            this[PropertySymbol.parentNode][PropertySymbol.shadowRoot]) {
+            const shadowRoot = this[PropertySymbol.parentNode][PropertySymbol.shadowRoot];
+            if (attribute[PropertySymbol.value] !== oldValue) {
+                // Previous slot
+                if (oldValue !== null) {
+                    const slot = shadowRoot.querySelector(`slot[name="${replacedAttribute[PropertySymbol.value]}"]`);
+                    if (slot) {
+                        slot.dispatchEvent(new Event_js_1.default('slotchange', { bubbles: true }));
+                    }
+                }
+                else {
+                    const slot = shadowRoot.querySelector('slot:not([name])');
+                    if (slot) {
+                        slot.dispatchEvent(new Event_js_1.default('slotchange', { bubbles: true }));
+                    }
+                }
+                // New slot
+                const slot = shadowRoot.querySelector(`slot[name="${attribute[PropertySymbol.value]}"]`);
+                if (slot) {
+                    slot.dispatchEvent(new Event_js_1.default('slotchange', { bubbles: true }));
+                }
+            }
+        }
+        if (attribute[PropertySymbol.name] === 'id' && this[PropertySymbol.isConnected]) {
+            if (replacedAttribute?.[PropertySymbol.value]) {
+                this.#removeIdentifierFromWindow(replacedAttribute[PropertySymbol.value]);
+            }
+            this.#addIdentifierToWindow(attribute[PropertySymbol.value]);
+        }
+        if (this[PropertySymbol.cache].style) {
+            this[PropertySymbol.cache].style.result = null;
+            this[PropertySymbol.cache].style = null;
+        }
+        if (this.attributeChangedCallback &&
+            this.constructor[PropertySymbol.observedAttributes] &&
+            this.constructor[PropertySymbol.observedAttributes].includes(attribute[PropertySymbol.name].toLowerCase())) {
+            this.attributeChangedCallback(attribute[PropertySymbol.name], oldValue, attribute[PropertySymbol.value]);
+        }
+        this[PropertySymbol.reportMutation](new MutationRecord_js_1.default({
+            target: this,
+            type: MutationTypeEnum_js_1.default.attributes,
+            attributeName: attribute[PropertySymbol.name],
+            oldValue
+        }));
+    }
+    /**
+     * Triggered when an attribute is set.
+     *
+     * @param removedAttribute Attribute.
+     */
+    [PropertySymbol.onRemoveAttribute](removedAttribute) {
+        if (removedAttribute[PropertySymbol.name] === 'slot' &&
+            this[PropertySymbol.parentNode] &&
+            this[PropertySymbol.parentNode][PropertySymbol.shadowRoot]) {
+            const shadowRoot = this[PropertySymbol.parentNode][PropertySymbol.shadowRoot];
+            const namedSlot = shadowRoot.querySelector(`slot[name="${removedAttribute[PropertySymbol.value]}"]`);
+            const defaultSlot = shadowRoot.querySelector('slot:not([name])');
+            if (namedSlot) {
+                namedSlot.dispatchEvent(new Event_js_1.default('slotchange', { bubbles: true }));
+            }
+            if (defaultSlot) {
+                defaultSlot.dispatchEvent(new Event_js_1.default('slotchange', { bubbles: true }));
+            }
+        }
+        if (removedAttribute[PropertySymbol.name] === 'id' && this[PropertySymbol.isConnected]) {
+            this.#removeIdentifierFromWindow(removedAttribute[PropertySymbol.value]);
+        }
+        if (this[PropertySymbol.cache].style) {
+            this[PropertySymbol.cache].style.result = null;
+            this[PropertySymbol.cache].style = null;
+        }
+        if (this.attributeChangedCallback &&
+            this.constructor[PropertySymbol.observedAttributes] &&
+            this.constructor[PropertySymbol.observedAttributes].includes(removedAttribute[PropertySymbol.name].toLowerCase())) {
+            this.attributeChangedCallback(removedAttribute[PropertySymbol.name], removedAttribute[PropertySymbol.value], null);
+        }
+        this[PropertySymbol.reportMutation](new MutationRecord_js_1.default({
+            type: MutationTypeEnum_js_1.default.attributes,
+            target: this,
+            attributeName: removedAttribute[PropertySymbol.name],
+            oldValue: removedAttribute[PropertySymbol.value]
+        }));
+    }
+    /**
+     * @override
+     */
+    [PropertySymbol.connectedToDocument]() {
+        super[PropertySymbol.connectedToDocument]();
+        const id = this[PropertySymbol.attributes][PropertySymbol.namedItems].get('id')?.[PropertySymbol.value];
+        if (id) {
+            this.#addIdentifierToWindow(id);
+        }
+    }
+    /**
+     * @override
+     */
+    [PropertySymbol.disconnectedFromDocument]() {
+        super[PropertySymbol.disconnectedFromDocument]();
+        const id = this[PropertySymbol.attributes][PropertySymbol.namedItems].get('id')?.[PropertySymbol.value];
+        if (id) {
+            this.#removeIdentifierFromWindow(this[PropertySymbol.attributes][PropertySymbol.namedItems].get('id')?.[PropertySymbol.value]);
+        }
+    }
+    /**
+     * Adds identifier to the window object.
+     *
+     * @param id Identifier.
+     */
+    #addIdentifierToWindow(id) {
+        if (!id) {
+            return;
+        }
+        const document = this[PropertySymbol.ownerDocument];
+        const window = this[PropertySymbol.window];
+        // We should not add the identifier when inside a shadow root
+        if (this[PropertySymbol.rootNode] && this[PropertySymbol.rootNode] !== document) {
+            return;
+        }
+        if (!document[PropertySymbol.elementIdMap].has(id)) {
+            document[PropertySymbol.elementIdMap].set(id, { elements: [], htmlCollection: null });
+        }
+        const entry = document[PropertySymbol.elementIdMap].get(id);
+        // HTMLFormElement and HTMLSelectElement can be a proxy, but the scope can be the target and not the actual proxy
+        // To make sure we use the proxy we can check for the proxy property
+        const element = this[PropertySymbol.proxy] || this;
+        entry.elements.push(element);
+        if (entry.elements.length > 1) {
+            if (!entry.htmlCollection) {
+                entry.htmlCollection = new HTMLCollection_js_1.default(PropertySymbol.illegalConstructor, () => entry.elements);
+            }
+            if (!(id in window) || window[id] === entry.elements[0]) {
+                window[id] = entry.htmlCollection;
+            }
+        }
+        else if (!(id in window) || window[id] === entry.htmlCollection) {
+            window[id] = element;
+        }
+    }
+    /**
+     * Removes identifier from the window object.
+     *
+     * @param id Identifier.
+     */
+    #removeIdentifierFromWindow(id) {
+        if (!id) {
+            return;
+        }
+        const document = this[PropertySymbol.ownerDocument];
+        const window = this[PropertySymbol.window];
+        // We should not add the identifier when inside a shadow root
+        if (this[PropertySymbol.rootNode] && this[PropertySymbol.rootNode] !== document) {
+            return;
+        }
+        const entry = document[PropertySymbol.elementIdMap].get(id);
+        if (entry) {
+            // HTMLFormElement and HTMLSelectElement can be a proxy, but the scope can be the target and not the actual proxy
+            // To make sure we use the proxy we can check for the proxy property
+            const element = this[PropertySymbol.proxy] || this;
+            const index = entry.elements.indexOf(element);
+            if (index !== -1) {
+                entry.elements.splice(index, 1);
+            }
+            if (entry.elements.length === 1) {
+                if (window[id] === entry.htmlCollection) {
+                    window[id] = entry.elements[0];
+                }
+                entry.htmlCollection = null;
+            }
+            else if (!entry.elements.length) {
+                document[PropertySymbol.elementIdMap].delete(id);
+                if (window[id] === element || window[id] === entry.htmlCollection) {
+                    delete window[id];
+                }
+            }
+        }
+    }
+    /**
+     * Triggered when child nodes are changed.
+     *
+     * @param addedOrRemovedNode Changed node.
+     */
+    #onSlotChange(addedOrRemovedNode) {
+        const shadowRoot = this[PropertySymbol.shadowRoot];
+        if (!shadowRoot) {
+            return;
+        }
+        const slotName = addedOrRemovedNode[PropertySymbol.attributes]?.[PropertySymbol.namedItems].get('slot')?.[PropertySymbol.value];
+        if (slotName) {
+            const slot = shadowRoot.querySelector(`slot[name="${slotName}"]`);
+            if (slot) {
+                slot.dispatchEvent(new Event_js_1.default('slotchange', { bubbles: true }));
+            }
+        }
+        else if (addedOrRemovedNode[PropertySymbol.nodeType] !== NodeTypeEnum_js_1.default.commentNode) {
+            const slot = shadowRoot.querySelector('slot:not([name])');
+            if (slot) {
+                slot.dispatchEvent(new Event_js_1.default('slotchange', { bubbles: true }));
+            }
+        }
+    }
 }
-Element[_a] = null;
-Element[_b] = null;
-Element[_c] = null;
 exports.default = Element;
 //# sourceMappingURL=Element.cjs.map