happy-dom 14.12.3 → 15.0.0

package/lib/nodes/element/Element.js

@@ -1,8 +1,7 @@
-var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
 import Node from '../node/Node.js';
 import * as PropertySymbol from '../../PropertySymbol.js';
 import DOMRect from './DOMRect.js';
-import DOMTokenList from '../../dom-token-list/DOMTokenList.js';
+import DOMTokenList from './DOMTokenList.js';
 import QuerySelector from '../../query-selector/QuerySelector.js';
 import XMLParser from '../../xml-parser/XMLParser.js';
 import XMLSerializer from '../../xml-serializer/XMLSerializer.js';
@@ -12,72 +11,81 @@ import NonDocumentChildNodeUtility from '../child-node/NonDocumentChildNodeUtili
 import DOMException from '../../exception/DOMException.js';
 import HTMLCollection from './HTMLCollection.js';
 import DOMRectList from './DOMRectList.js';
-import ElementUtility from './ElementUtility.js';
+import NamedNodeMap from './NamedNodeMap.js';
+import Event from '../../event/Event.js';
 import EventPhaseEnum from '../../event/EventPhaseEnum.js';
-import ElementNamedNodeMap from './ElementNamedNodeMap.js';
 import WindowErrorUtility from '../../window/WindowErrorUtility.js';
 import WindowBrowserSettingsReader from '../../window/WindowBrowserSettingsReader.js';
 import BrowserErrorCaptureEnum from '../../browser/enums/BrowserErrorCaptureEnum.js';
-import NodeFactory from '../NodeFactory.js';
 import NodeTypeEnum from '../node/NodeTypeEnum.js';
+import MutationRecord from '../../mutation-observer/MutationRecord.js';
+import MutationTypeEnum from '../../mutation-observer/MutationTypeEnum.js';
+import NamespaceURI from '../../config/NamespaceURI.js';
+import NamedNodeMapProxyFactory from './NamedNodeMapProxyFactory.js';
+import NodeFactory from '../NodeFactory.js';
 /**
  * Element.
  */
-class Element extends Node {
-    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();
-        this[_e] = null;
-        this[_f] = null;
-        this[_g] = null;
-        this[_h] = NodeTypeEnum.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(this);
-        this[_t] = this.constructor[PropertySymbol.namespaceURI] || null;
-    }
+export default class Element extends Node {
+    // 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.elementNode;
+    [PropertySymbol.tagName] = this.constructor[PropertySymbol.tagName] || null;
+    [PropertySymbol.localName] = this.constructor[PropertySymbol.localName] || null;
+    [PropertySymbol.prefix] = null;
+    [PropertySymbol.shadowRoot] = null;
+    [PropertySymbol.scrollHeight] = 0;
+    [PropertySymbol.scrollWidth] = 0;
+    [PropertySymbol.scrollTop] = 0;
+    [PropertySymbol.scrollLeft] = 0;
+    [PropertySymbol.attributes] = new NamedNodeMap(this);
+    [PropertySymbol.attributesProxy] = null;
+    [PropertySymbol.namespaceURI] = this.constructor[PropertySymbol.namespaceURI] || null;
+    [PropertySymbol.children] = null;
+    [PropertySymbol.computedStyle] = null;
     /**
      * Returns tag name.
      *
@@ -157,7 +165,10 @@ class Element extends Node {
      * @returns Attributes.
      */
     get attributes() {
-        return this[PropertySymbol.attributes];
+        if (!this[PropertySymbol.attributesProxy]) {
+            this[PropertySymbol.attributesProxy] = NamedNodeMapProxyFactory.createProxy(this[PropertySymbol.attributes]);
+        }
+        return this[PropertySymbol.attributesProxy];
     }
     /**
      * Returns namespace URI.
@@ -171,6 +182,10 @@ class Element extends Node {
      * Returns element children.
      */
     get children() {
+        if (!this[PropertySymbol.children]) {
+            const elements = this[PropertySymbol.elementArray];
+            this[PropertySymbol.children] = new HTMLCollection(PropertySymbol.illegalConstructor, () => elements);
+        }
         return this[PropertySymbol.children];
     }
     /**
@@ -271,7 +286,7 @@ class Element extends Node {
      */
     get textContent() {
         let result = '';
-        for (const childNode of this[PropertySymbol.childNodes]) {
+        for (const childNode of this[PropertySymbol.nodeArray]) {
             if (childNode[PropertySymbol.nodeType] === NodeTypeEnum.elementNode ||
                 childNode[PropertySymbol.nodeType] === NodeTypeEnum.textNode) {
                 result += childNode.textContent;
@@ -285,8 +300,9 @@ class Element extends Node {
      * @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));
@@ -298,7 +314,7 @@ class Element extends Node {
      * @returns HTML.
      */
     get innerHTML() {
-        return this.getInnerHTML();
+        return this.getHTML();
     }
     /**
      * Sets inner HTML.
@@ -306,8 +322,9 @@ class Element extends Node {
      * @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.parse(this[PropertySymbol.ownerDocument], html, { rootNode: this });
     }
@@ -317,7 +334,7 @@ class Element extends Node {
      * @returns HTML.
      */
     get outerHTML() {
-        return new XMLSerializer({ escapeEntities: false }).serializeToString(this);
+        return new XMLSerializer().serializeToString(this);
     }
     /**
      * Returns outer HTML.
@@ -328,28 +345,29 @@ class Element extends Node {
         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.
@@ -370,21 +388,43 @@ class Element extends Node {
     /**
      * 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({
-            includeShadowRoots: options && options.includeShadowRoots,
-            escapeEntities: false
-        });
+        const xmlSerializer = new XMLSerializer();
+        if (options?.includeShadowRoots) {
+            xmlSerializer[PropertySymbol.options].allShadowRoots = true;
+        }
+        let xml = '';
+        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();
+        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.childNodes]) {
+        for (const node of this[PropertySymbol.nodeArray]) {
             xml += xmlSerializer.serializeToString(node);
         }
         return xml;
@@ -392,45 +432,20 @@ class Element extends Node {
     /**
      * @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.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.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.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.insertBefore(this, newNode, referenceNode);
-    }
     /**
      * Removes the node from its parent.
      */
@@ -520,8 +535,9 @@ class Element extends Node {
      * @param text HTML string to insert.
      */
     insertAdjacentHTML(position, text) {
-        for (const node of (XMLParser.parse(this[PropertySymbol.ownerDocument], text))[PropertySymbol.childNodes].slice()) {
-            this.insertAdjacentElement(position, node);
+        const childNodes = (XMLParser.parse(this[PropertySymbol.ownerDocument], text))[PropertySymbol.nodeArray];
+        while (childNodes.length) {
+            this.insertAdjacentElement(position, childNodes[0]);
         }
     }
     /**
@@ -544,9 +560,13 @@ class Element extends Node {
      * @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.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.
@@ -558,7 +578,7 @@ class Element extends Node {
     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.
@@ -566,11 +586,11 @@ class Element extends Node {
      * @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.
@@ -578,7 +598,7 @@ class Element extends Node {
      * @param name Name.
      */
     getAttribute(name) {
-        const attribute = this.getAttributeNode(name);
+        const attribute = this[PropertySymbol.attributes].getNamedItem(name);
         if (attribute) {
             return attribute[PropertySymbol.value];
         }
@@ -593,12 +613,12 @@ class Element extends Node {
      */
     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) {
@@ -645,7 +665,7 @@ class Element extends Node {
      * @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.
@@ -653,11 +673,9 @@ class Element extends Node {
      * @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);
         }
     }
     /**
@@ -667,24 +685,45 @@ class Element extends Node {
      * @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) {
+        if (!init) {
+            throw new TypeError("Failed to execute 'attachShadow' on 'Element': 1 argument required, but only 0 present.");
+        }
+        if (!init.mode) {
+            throw new 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 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('Shadow root has already been attached.');
+            throw new DOMException("Failed to execute 'attachShadow' on 'Element': Shadow root cannot be created on a host which already hosts a shadow tree.");
         }
         const shadowRoot = NodeFactory.createNode(this[PropertySymbol.ownerDocument], this[PropertySymbol.ownerDocument][PropertySymbol.ownerWindow].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];
     }
     /**
@@ -832,16 +871,11 @@ class Element extends Node {
      * @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 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.
@@ -917,9 +951,242 @@ class Element extends Node {
         }
         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('slotchange', { bubbles: true }));
+                    }
+                }
+                else {
+                    const slot = shadowRoot.querySelector('slot:not([name])');
+                    if (slot) {
+                        slot.dispatchEvent(new Event('slotchange', { bubbles: true }));
+                    }
+                }
+                // New slot
+                const slot = shadowRoot.querySelector(`slot[name="${attribute[PropertySymbol.value]}"]`);
+                if (slot) {
+                    slot.dispatchEvent(new Event('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({
+            target: this,
+            type: MutationTypeEnum.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('slotchange', { bubbles: true }));
+            }
+            if (defaultSlot) {
+                defaultSlot.dispatchEvent(new Event('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({
+            type: MutationTypeEnum.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 = document[PropertySymbol.ownerWindow];
+        // 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(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 = document[PropertySymbol.ownerWindow];
+        // 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('slotchange', { bubbles: true }));
+            }
+        }
+        else if (addedOrRemovedNode[PropertySymbol.nodeType] !== NodeTypeEnum.commentNode) {
+            const slot = shadowRoot.querySelector('slot:not([name])');
+            if (slot) {
+                slot.dispatchEvent(new Event('slotchange', { bubbles: true }));
+            }
+        }
+    }
 }
-Element[_a] = null;
-Element[_b] = null;
-Element[_c] = null;
-export default Element;
 //# sourceMappingURL=Element.js.map