happy-dom 15.11.7 → 16.0.0

package/src/nodes/element/Element.ts

@@ -4,8 +4,6 @@ import ShadowRoot from '../shadow-root/ShadowRoot.js';
 import DOMRect from '../../dom/DOMRect.js';
 import DOMTokenList from '../../dom/DOMTokenList.js';
 import QuerySelector from '../../query-selector/QuerySelector.js';
-import XMLParser from '../../xml-parser/XMLParser.js';
-import XMLSerializer from '../../xml-serializer/XMLSerializer.js';
 import ChildNodeUtility from '../child-node/ChildNodeUtility.js';
 import ParentNodeUtility from '../parent-node/ParentNodeUtility.js';
 import NonDocumentChildNodeUtility from '../child-node/NonDocumentChildNodeUtility.js';
@@ -16,7 +14,6 @@ import Attr from '../attr/Attr.js';
 import NamedNodeMap from './NamedNodeMap.js';
 import Event from '../../event/Event.js';
 import EventPhaseEnum from '../../event/EventPhaseEnum.js';
-import DocumentFragment from '../document-fragment/DocumentFragment.js';
 import WindowErrorUtility from '../../window/WindowErrorUtility.js';
 import WindowBrowserContext from '../../window/WindowBrowserContext.js';
 import BrowserErrorCaptureEnum from '../../browser/enums/BrowserErrorCaptureEnum.js';
@@ -33,6 +30,8 @@ import NodeList from '../node/NodeList.js';
 import CSSStyleDeclaration from '../../css/declaration/CSSStyleDeclaration.js';
 import NamedNodeMapProxyFactory from './NamedNodeMapProxyFactory.js';
 import NodeFactory from '../NodeFactory.js';
+import HTMLSerializer from '../../html-serializer/HTMLSerializer.js';
+import HTMLParser from '../../html-parser/HTMLParser.js';
 
 type InsertAdjacentPosition = 'beforebegin' | 'afterbegin' | 'beforeend' | 'afterend';
 
@@ -43,13 +42,9 @@ export default class Element
 	extends Node
 	implements IChildNode, INonDocumentTypeChildNode, IParentNode
 {
-	// ObservedAttributes should only be called once by CustomElementRegistry (see #117)
-	// CustomElementRegistry will therefore populate "[PropertySymbol.observedAttributes]" when CustomElementRegistry.define() is called
-	public static [PropertySymbol.observedAttributes]: string[];
 	public static [PropertySymbol.tagName]: string | null = null;
 	public static [PropertySymbol.localName]: string | null = null;
 	public static [PropertySymbol.namespaceURI]: string | null = null;
-	public static observedAttributes: string[];
 	public declare cloneNode: (deep?: boolean) => Element;
 
 	// Events
@@ -407,7 +402,7 @@ export default class Element
 			this.removeChild(childNodes[0]);
 		}
 
-		XMLParser.parse(this[PropertySymbol.ownerDocument], html, { rootNode: this });
+		new HTMLParser(this[PropertySymbol.window]).parse(html, this);
 	}
 
 	/**
@@ -416,7 +411,7 @@ export default class Element
 	 * @returns HTML.
 	 */
 	public get outerHTML(): string {
-		return new XMLSerializer().serializeToString(this);
+		return new HTMLSerializer().serializeToString(this);
 	}
 
 	/**
@@ -425,9 +420,9 @@ export default class Element
 	 * @param html HTML.
 	 */
 	public set outerHTML(html: string) {
-		const childNodes = (<DocumentFragment>(
-			XMLParser.parse(this[PropertySymbol.ownerDocument], html)
-		))[PropertySymbol.nodeArray];
+		const childNodes = new HTMLParser(this[PropertySymbol.window]).parse(html)[
+			PropertySymbol.nodeArray
+		];
 		this.replaceWith(...childNodes);
 	}
 
@@ -477,15 +472,6 @@ export default class Element
 		this.setAttribute('slot', title);
 	}
 
-	/**
-	 * Attribute changed callback.
-	 *
-	 * @param name Name.
-	 * @param oldValue Old value.
-	 * @param newValue New value.
-	 */
-	public attributeChangedCallback?(name: string, oldValue: string, newValue: string): void;
-
 	/**
 	 * Returns inner HTML and optionally the content of shadow roots.
 	 *
@@ -495,19 +481,17 @@ export default class Element
 	 * @returns HTML.
 	 */
 	public getInnerHTML(options?: { includeShadowRoots?: boolean }): string {
-		const xmlSerializer = new XMLSerializer();
-
-		if (options?.includeShadowRoots) {
-			xmlSerializer[PropertySymbol.options].allShadowRoots = true;
-		}
+		const serializer = new HTMLSerializer({
+			allShadowRoots: !!options?.includeShadowRoots
+		});
 
-		let xml = '';
+		let html = '';
 
 		for (const node of this[PropertySymbol.nodeArray]) {
-			xml += xmlSerializer.serializeToString(node);
+			html += serializer.serializeToString(node);
 		}
 
-		return xml;
+		return html;
 	}
 
 	/**
@@ -522,25 +506,18 @@ export default class Element
 		serializableShadowRoots?: boolean;
 		shadowRoots?: ShadowRoot[];
 	}): string {
-		const xmlSerializer = new XMLSerializer();
+		const serializer = new HTMLSerializer({
+			serializableShadowRoots: !!options?.serializableShadowRoots,
+			shadowRoots: options?.shadowRoots ?? null
+		});
 
-		if (options) {
-			if (options.serializableShadowRoots) {
-				xmlSerializer[PropertySymbol.options].serializableShadowRoots =
-					options.serializableShadowRoots;
-			}
-			if (options.shadowRoots) {
-				xmlSerializer[PropertySymbol.options].shadowRoots = options.shadowRoots;
-			}
-		}
-
-		let xml = '';
+		let html = '';
 
 		for (const node of this[PropertySymbol.nodeArray]) {
-			xml += xmlSerializer.serializeToString(node);
+			html += serializer.serializeToString(node);
 		}
 
-		return xml;
+		return html;
 	}
 
 	/**
@@ -662,9 +639,9 @@ export default class Element
 	 * @param text HTML string to insert.
 	 */
 	public insertAdjacentHTML(position: InsertAdjacentPosition, text: string): void {
-		const childNodes = (<DocumentFragment>(
-			XMLParser.parse(this[PropertySymbol.ownerDocument], text)
-		))[PropertySymbol.nodeArray];
+		const childNodes = new HTMLParser(this[PropertySymbol.window]).parse(text)[
+			PropertySymbol.nodeArray
+		];
 		while (childNodes.length) {
 			this.insertAdjacentElement(position, childNodes[0]);
 		}
@@ -694,9 +671,10 @@ export default class Element
 		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);
+			namespaceURI === NamespaceURI.html &&
+			this[PropertySymbol.ownerDocument][PropertySymbol.contentType] === 'text/html'
+				? this[PropertySymbol.ownerDocument].createAttribute(name)
+				: this[PropertySymbol.ownerDocument].createAttributeNS(null, name);
 		attribute[PropertySymbol.value] = String(value);
 		this[PropertySymbol.attributes].setNamedItem(attribute);
 	}
@@ -721,7 +699,7 @@ export default class Element
 	 */
 	public getAttributeNames(): string[] {
 		const names = [];
-		for (const item of this[PropertySymbol.attributes][PropertySymbol.namedItems].values()) {
+		for (const item of this[PropertySymbol.attributes][PropertySymbol.namespaceItems].values()) {
 			names.push(item[PropertySymbol.name]);
 		}
 		return names;
@@ -1282,8 +1260,8 @@ export default class Element
 	/**
 	 * @override
 	 */
-	public override [PropertySymbol.appendChild](node: Node, isDuringParsing = false): Node {
-		const returnValue = super[PropertySymbol.appendChild](node, isDuringParsing);
+	public override [PropertySymbol.appendChild](node: Node, disableValidations = false): Node {
+		const returnValue = super[PropertySymbol.appendChild](node, disableValidations);
 		this.#onSlotChange(node);
 		return returnValue;
 	}
@@ -1300,8 +1278,16 @@ export default class Element
 	/**
 	 * @override
 	 */
-	public override [PropertySymbol.insertBefore](newNode: Node, referenceNode: Node | null): Node {
-		const returnValue = super[PropertySymbol.insertBefore](newNode, referenceNode);
+	public override [PropertySymbol.insertBefore](
+		newNode: Node,
+		referenceNode: Node | null,
+		disableValidations = false
+	): Node {
+		const returnValue = super[PropertySymbol.insertBefore](
+			newNode,
+			referenceNode,
+			disableValidations
+		);
 		this.#onSlotChange(newNode);
 		return returnValue;
 	}
@@ -1357,20 +1343,6 @@ export default class Element
 			this.#addIdentifierToWindow(attribute[PropertySymbol.value]);
 		}
 
-		if (
-			this.attributeChangedCallback &&
-			(<typeof Element>this.constructor)[PropertySymbol.observedAttributes] &&
-			(<typeof Element>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,
@@ -1409,20 +1381,6 @@ export default class Element
 			this.#removeIdentifierFromWindow(removedAttribute[PropertySymbol.value]);
 		}
 
-		if (
-			this.attributeChangedCallback &&
-			(<typeof Element>this.constructor)[PropertySymbol.observedAttributes] &&
-			(<typeof Element>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,
@@ -1437,13 +1395,12 @@ export default class Element
 	 * @override
 	 */
 	public override [PropertySymbol.connectedToDocument](): void {
-		super[PropertySymbol.connectedToDocument]();
-
-		const id =
-			this[PropertySymbol.attributes][PropertySymbol.namedItems].get('id')?.[PropertySymbol.value];
+		const id = this.getAttribute('id');
 		if (id) {
 			this.#addIdentifierToWindow(id);
 		}
+
+		super[PropertySymbol.connectedToDocument]();
 	}
 
 	/**
@@ -1452,12 +1409,9 @@ export default class Element
 	public override [PropertySymbol.disconnectedFromDocument](): void {
 		super[PropertySymbol.disconnectedFromDocument]();
 
-		const id =
-			this[PropertySymbol.attributes][PropertySymbol.namedItems].get('id')?.[PropertySymbol.value];
+		const id = this.getAttribute('id');
 		if (id) {
-			this.#removeIdentifierFromWindow(
-				this[PropertySymbol.attributes][PropertySymbol.namedItems].get('id')?.[PropertySymbol.value]
-			);
+			this.#removeIdentifierFromWindow(id);
 		}
 	}
 
@@ -1565,10 +1519,9 @@ export default class Element
 			return;
 		}
 
-		const slotName =
-			addedOrRemovedNode[PropertySymbol.attributes]?.[PropertySymbol.namedItems].get('slot')?.[
-				PropertySymbol.value
-			];
+		const slotName = addedOrRemovedNode['getAttribute']
+			? (<Element>addedOrRemovedNode).getAttribute('slot')
+			: null;
 		if (slotName) {
 			const slot = shadowRoot.querySelector(`slot[name="${slotName}"]`);
 			if (slot) {

package/src/nodes/element/HTMLCollection.ts

@@ -1,4 +1,4 @@
-import ClassMethodBinder from '../../ClassMethodBinder.js';
+import ClassMethodBinder from '../../utilities/ClassMethodBinder.js';
 import * as PropertySymbol from '../../PropertySymbol.js';
 import Element from './Element.js';
 
@@ -75,13 +75,7 @@ export default class HTMLCollection<T extends Element, NamedItem = T> {
 				const items = query();
 				for (let i = 0; i < items.length; i++) {
 					const item = items[i];
-					const name =
-						item[PropertySymbol.attributes][PropertySymbol.namedItems].get('id')?.[
-							PropertySymbol.value
-						] ||
-						item[PropertySymbol.attributes][PropertySymbol.namedItems].get('name')?.[
-							PropertySymbol.value
-						];
+					const name = item.getAttribute('id') || item.getAttribute('name');
 					keys.push(String(i));
 
 					if (name) {
@@ -106,13 +100,7 @@ export default class HTMLCollection<T extends Element, NamedItem = T> {
 
 				for (let i = 0; i < items.length; i++) {
 					const item = items[i];
-					const name =
-						item[PropertySymbol.attributes][PropertySymbol.namedItems].get('id')?.[
-							PropertySymbol.value
-						] ||
-						item[PropertySymbol.attributes][PropertySymbol.namedItems].get('name')?.[
-							PropertySymbol.value
-						];
+					const name = item.getAttribute('id') || item.getAttribute('name');
 
 					if (name && name === property) {
 						return true;
@@ -150,13 +138,7 @@ export default class HTMLCollection<T extends Element, NamedItem = T> {
 
 				for (let i = 0; i < items.length; i++) {
 					const item = items[i];
-					const name =
-						item[PropertySymbol.attributes][PropertySymbol.namedItems].get('id')?.[
-							PropertySymbol.value
-						] ||
-						item[PropertySymbol.attributes][PropertySymbol.namedItems].get('name')?.[
-							PropertySymbol.value
-						];
+					const name = item.getAttribute('id') || item.getAttribute('name');
 
 					if (name && name === property) {
 						return {
@@ -237,14 +219,7 @@ export default class HTMLCollection<T extends Element, NamedItem = T> {
 		const items = this[PropertySymbol.query]();
 		name = String(name);
 		for (const item of items) {
-			if (
-				item[PropertySymbol.attributes][PropertySymbol.namedItems].get('id')?.[
-					PropertySymbol.value
-				] === name ||
-				item[PropertySymbol.attributes][PropertySymbol.namedItems].get('name')?.[
-					PropertySymbol.value
-				] === name
-			) {
+			if (item.getAttribute('id') === name || item.getAttribute('name') === name) {
 				return <NamedItem>(<unknown>item);
 			}
 		}

package/src/nodes/element/NamedNodeMap.ts

@@ -4,6 +4,7 @@ import DOMException from '../../exception/DOMException.js';
 import DOMExceptionNameEnum from '../../exception/DOMExceptionNameEnum.js';
 import Element from './Element.js';
 import NamespaceURI from '../../config/NamespaceURI.js';
+import StringUtility from '../../utilities/StringUtility.js';
 
 /**
  * Named Node Map.
@@ -17,7 +18,7 @@ export default class NamedNodeMap {
 	public [PropertySymbol.namespaceItems]: Map<string, Attr> = new Map();
 
 	// Items without namespaceURI as prefix, where the HTML namespace is the default namespace
-	public [PropertySymbol.namedItems]: Map<string, Attr> = new Map();
+	public [PropertySymbol.namedItems]: Map<string, Attr[]> = new Map();
 
 	public declare [PropertySymbol.ownerElement]: Element;
 
@@ -83,14 +84,15 @@ export default class NamedNodeMap {
 	 * @returns Item.
 	 */
 	public getNamedItem(name: string): Attr | null {
-		return (
-			this[PropertySymbol.namedItems].get(
-				this[PropertySymbol.getNamedItemKey](
-					this[PropertySymbol.ownerElement][PropertySymbol.namespaceURI],
-					name
-				)
-			) || null
-		);
+		if (
+			this[PropertySymbol.ownerElement][PropertySymbol.namespaceURI] === NamespaceURI.html &&
+			this[PropertySymbol.ownerElement][PropertySymbol.ownerDocument][
+				PropertySymbol.contentType
+			] === 'text/html'
+		) {
+			return this[PropertySymbol.namedItems].get(StringUtility.asciiLowerCase(name))?.[0] || null;
+		}
+		return this[PropertySymbol.namedItems].get(name)?.[0] || null;
 	}
 
 	/**
@@ -101,15 +103,11 @@ export default class NamedNodeMap {
 	 * @returns Item.
 	 */
 	public getNamedItemNS(namespace: string, localName: string): Attr | null {
-		for (const item of this[PropertySymbol.namespaceItems].values()) {
-			if (
-				item[PropertySymbol.namespaceURI] === namespace &&
-				item[PropertySymbol.localName] === localName
-			) {
-				return item;
-			}
+		if (namespace === '') {
+			namespace = null;
 		}
-		return null;
+
+		return this[PropertySymbol.namespaceItems].get(`${namespace || ''}:${localName}`) || null;
 	}
 
 	/**
@@ -185,32 +183,41 @@ export default class NamedNodeMap {
 	 * @returns Replaced item.
 	 */
 	public [PropertySymbol.setNamedItem](item: Attr, ignoreListeners = false): Attr {
-		if (!item[PropertySymbol.name]) {
-			return null;
+		if (
+			item[PropertySymbol.ownerElement] !== null &&
+			item[PropertySymbol.ownerElement] !== this[PropertySymbol.ownerElement]
+		) {
+			throw new this[PropertySymbol.ownerElement][PropertySymbol.window].DOMException(
+				'The attribute is in use.',
+				DOMExceptionNameEnum.inUseAttributeError
+			);
 		}
 
 		item[PropertySymbol.ownerElement] = this[PropertySymbol.ownerElement];
 
-		const namespaceItemKey = this[PropertySymbol.getNamespaceItemKey](item);
-		const replacedItem = this[PropertySymbol.namespaceItems].get(namespaceItemKey) || null;
-		const replacedNamedItem =
-			this[PropertySymbol.namedItems].get(item[PropertySymbol.name]) || null;
+		const replacedItem =
+			this.getNamedItemNS(item[PropertySymbol.namespaceURI], item[PropertySymbol.localName]) ||
+			null;
 
-		this[PropertySymbol.namespaceItems].set(namespaceItemKey, item);
+		const namedItems = this[PropertySymbol.namedItems].get(item[PropertySymbol.name]);
 
-		// The HTML namespace should be prioritized over other namespaces in the namedItems map
-		// The HTML namespace is the default namespace
-		if (
-			(!replacedNamedItem ||
-				(replacedNamedItem[PropertySymbol.namespaceURI] &&
-					replacedNamedItem[PropertySymbol.namespaceURI] !== NamespaceURI.html) ||
-				!item[PropertySymbol.namespaceURI] ||
-				item[PropertySymbol.namespaceURI] === NamespaceURI.html) &&
-			// Only lower case names should be stored in the namedItems map
-			(this[PropertySymbol.ownerElement][PropertySymbol.namespaceURI] !== NamespaceURI.html ||
-				item[PropertySymbol.name].toLowerCase() === item[PropertySymbol.name])
-		) {
-			this[PropertySymbol.namedItems].set(item[PropertySymbol.name], item);
+		if (replacedItem === item) {
+			return item;
+		}
+
+		this[PropertySymbol.namespaceItems].set(
+			`${item[PropertySymbol.namespaceURI] || ''}:${item[PropertySymbol.localName]}`,
+			item
+		);
+
+		if (!namedItems?.length) {
+			this[PropertySymbol.namedItems].set(item[PropertySymbol.name], [item]);
+		} else {
+			const index = namedItems.indexOf(replacedItem);
+			if (index !== -1) {
+				namedItems.splice(index, 1);
+			}
+			namedItems.push(item);
 		}
 
 		if (!ignoreListeners) {
@@ -228,46 +235,25 @@ export default class NamedNodeMap {
 	 */
 	public [PropertySymbol.removeNamedItem](item: Attr, ignoreListeners = false): void {
 		item[PropertySymbol.ownerElement] = null;
-		this[PropertySymbol.namespaceItems].delete(this[PropertySymbol.getNamespaceItemKey](item));
-		this[PropertySymbol.namedItems].delete(
-			this[PropertySymbol.getNamedItemKey](
-				this[PropertySymbol.ownerElement][PropertySymbol.namespaceURI],
-				item[PropertySymbol.name]
-			)
+
+		this[PropertySymbol.namespaceItems].delete(
+			`${item[PropertySymbol.namespaceURI] || ''}:${item[PropertySymbol.localName]}`
 		);
 
-		if (!ignoreListeners) {
-			this[PropertySymbol.ownerElement][PropertySymbol.onRemoveAttribute](item);
-		}
-	}
+		const namedItems = this[PropertySymbol.namedItems].get(item[PropertySymbol.name]);
 
-	/**
-	 * Returns item name based on namespace.
-	 *
-	 * @param namespaceURI Namespace.
-	 * @param name Name.
-	 * @returns Item name based on namespace.
-	 */
-	private [PropertySymbol.getNamedItemKey](namespaceURI: string, name: string): string {
-		if (!namespaceURI || namespaceURI === NamespaceURI.html) {
-			return name.toLowerCase();
+		if (namedItems?.length) {
+			const index = namedItems.indexOf(item);
+			if (index !== -1) {
+				namedItems.splice(index, 1);
+			}
+			if (!namedItems.length) {
+				this[PropertySymbol.namedItems].delete(item[PropertySymbol.name]);
+			}
 		}
-		return name;
-	}
 
-	/**
-	 * Returns item key.
-	 *
-	 * @param item Item.
-	 * @returns Key.
-	 */
-	private [PropertySymbol.getNamespaceItemKey](item: Attr): string {
-		if (
-			!item[PropertySymbol.namespaceURI] ||
-			item[PropertySymbol.namespaceURI] === NamespaceURI.html
-		) {
-			return item[PropertySymbol.name].toLowerCase();
+		if (!ignoreListeners) {
+			this[PropertySymbol.ownerElement][PropertySymbol.onRemoveAttribute](item);
 		}
-		return `${item[PropertySymbol.namespaceURI] || ''}:${item[PropertySymbol.name]}`;
 	}
 }

package/src/nodes/element/NamedNodeMapProxyFactory.ts

@@ -1,6 +1,6 @@
 /* eslint-disable filenames/match-exported */
 
-import ClassMethodBinder from '../../ClassMethodBinder.js';
+import ClassMethodBinder from '../../utilities/ClassMethodBinder.js';
 import * as PropertySymbol from '../../PropertySymbol.js';
 import NamedNodeMap from './NamedNodeMap.js';
 
@@ -16,15 +16,12 @@ export default class NamedNodeMapProxyFactory {
 	 * @param namedNodeMap
 	 */
 	public static createProxy(namedNodeMap: NamedNodeMap): NamedNodeMap {
-		const namedItems = namedNodeMap[PropertySymbol.namedItems];
-		const namespaceItems = namedNodeMap[PropertySymbol.namespaceItems];
-
 		const methodBinder = new ClassMethodBinder(this, [NamedNodeMap]);
 
 		return new Proxy<NamedNodeMap>(namedNodeMap, {
 			get: (target, property) => {
 				if (property === 'length') {
-					return namespaceItems.size;
+					return namedNodeMap[PropertySymbol.namedItems].size;
 				}
 				if (property in target || typeof property === 'symbol') {
 					methodBinder.bind(property);
@@ -32,7 +29,7 @@ export default class NamedNodeMapProxyFactory {
 				}
 				const index = Number(property);
 				if (!isNaN(index)) {
-					return Array.from(namespaceItems.values())[index];
+					return Array.from(namedNodeMap[PropertySymbol.namedItems].values())[index]?.[0];
 				}
 				return target.getNamedItem(<string>property) || undefined;
 			},
@@ -60,8 +57,8 @@ export default class NamedNodeMapProxyFactory {
 				return true;
 			},
 			ownKeys(): string[] {
-				const keys = Array.from(namedItems.keys());
-				for (let i = 0, max = namespaceItems.size; i < max; i++) {
+				const keys = Array.from(namedNodeMap[PropertySymbol.namedItems].keys());
+				for (let i = 0, max = namedNodeMap[PropertySymbol.namedItems].size; i < max; i++) {
 					keys.push(String(i));
 				}
 				return keys;
@@ -71,13 +68,13 @@ export default class NamedNodeMapProxyFactory {
 					return false;
 				}
 
-				if (property in target || namedItems.has(property)) {
+				if (property in target || namedNodeMap[PropertySymbol.namedItems].has(property)) {
 					return true;
 				}
 
 				const index = Number(property);
 
-				if (!isNaN(index) && index >= 0 && index < namespaceItems.size) {
+				if (!isNaN(index) && index >= 0 && index < namedNodeMap[PropertySymbol.namedItems].size) {
 					return true;
 				}
 
@@ -100,20 +97,20 @@ export default class NamedNodeMapProxyFactory {
 
 				const index = Number(property);
 
-				if (!isNaN(index) && index >= 0 && index < namespaceItems.size) {
+				if (!isNaN(index) && index >= 0 && index < namedNodeMap[PropertySymbol.namedItems].size) {
 					return {
-						value: Array.from(namespaceItems.values())[index],
+						value: Array.from(namedNodeMap[PropertySymbol.namedItems].values())[index][0],
 						writable: false,
 						enumerable: true,
 						configurable: true
 					};
 				}
 
-				const namedItem = target.getNamedItem(<string>property);
+				const namedItems = namedNodeMap[PropertySymbol.namedItems].get(<string>property);
 
-				if (namedItem) {
+				if (namedItems) {
 					return {
-						value: namedItem,
+						value: namedItems[0],
 						writable: false,
 						enumerable: true,
 						configurable: true

package/src/nodes/html-button-element/HTMLButtonElement.ts

@@ -236,10 +236,7 @@ export default class HTMLButtonElement extends HTMLElement {
 		if (this[PropertySymbol.formNode]) {
 			return this[PropertySymbol.formNode];
 		}
-		const id =
-			this[PropertySymbol.attributes][PropertySymbol.namedItems].get('form')?.[
-				PropertySymbol.value
-			];
+		const id = this.getAttribute('form');
 		if (!id || !this[PropertySymbol.isConnected]) {
 			return null;
 		}