happy-dom 15.11.7 → 16.0.0

package/src/nodes/html-document/HTMLDocument.ts

@@ -1,5 +1,7 @@
 import Document from '../document/Document.js';
 import * as PropertySymbol from '../../PropertySymbol.js';
+import Node from '../node/Node.js';
+import NodeTypeEnum from '../node/NodeTypeEnum.js';
 
 /**
  * Document.
@@ -12,15 +14,69 @@ export default class HTMLDocument extends Document {
 		super();
 
 		// Default document elements
-		const doctype = this[PropertySymbol.implementation].createDocumentType('html', '', '');
 		const documentElement = this.createElement('html');
 		const bodyElement = this.createElement('body');
 		const headElement = this.createElement('head');
 
-		this.appendChild(doctype);
 		this.appendChild(documentElement);
 
 		documentElement.appendChild(headElement);
 		documentElement.appendChild(bodyElement);
 	}
+
+	/**
+	 * @override
+	 */
+	public override [PropertySymbol.appendChild](node: Node, disableValidations = false): Node {
+		if (node[PropertySymbol.nodeType] === NodeTypeEnum.textNode) {
+			throw new this[PropertySymbol.window].Error(
+				`Failed to execute 'appendChild' on 'Node': Nodes of type '#text' may not be inserted inside nodes of type '#document'.`
+			);
+		}
+
+		if (node[PropertySymbol.nodeType] === NodeTypeEnum.documentFragmentNode) {
+			return;
+		}
+
+		if (
+			node[PropertySymbol.nodeType] === NodeTypeEnum.elementNode &&
+			this[PropertySymbol.elementArray].length !== 0
+		) {
+			throw new this[PropertySymbol.window].Error(
+				`Failed to execute 'appendChild' on 'Node': Only one element on document allowed.`
+			);
+		}
+
+		return super[PropertySymbol.appendChild](node, disableValidations);
+	}
+
+	/**
+	 * @override
+	 */
+	public override [PropertySymbol.insertBefore](
+		newNode: Node,
+		referenceNode: Node | null,
+		disableValidations = false
+	): Node {
+		if (newNode[PropertySymbol.nodeType] === NodeTypeEnum.textNode) {
+			throw new this[PropertySymbol.window].Error(
+				`Failed to execute 'insertBefore' on 'Node': Nodes of type '#text' may not be inserted inside nodes of type '#document'.`
+			);
+		}
+
+		if (newNode[PropertySymbol.nodeType] === NodeTypeEnum.documentFragmentNode) {
+			return;
+		}
+
+		if (
+			newNode[PropertySymbol.nodeType] === NodeTypeEnum.elementNode &&
+			this[PropertySymbol.elementArray].length !== 0
+		) {
+			throw new this[PropertySymbol.window].Error(
+				`Failed to execute 'insertBefore' on 'Node': Only one element on document allowed.`
+			);
+		}
+
+		return super[PropertySymbol.insertBefore](newNode, referenceNode, disableValidations);
+	}
 }

package/src/nodes/html-element/HTMLElement.ts

@@ -6,7 +6,7 @@ import NodeTypeEnum from '../node/NodeTypeEnum.js';
 import Event from '../../event/Event.js';
 import HTMLElementUtility from './HTMLElementUtility.js';
 import DOMStringMap from '../../dom/DOMStringMap.js';
-import WindowBrowserContext from '../../window/WindowBrowserContext.js';
+import Attr from '../attr/Attr.js';
 
 /**
  * HTML Element.
@@ -17,6 +17,7 @@ import WindowBrowserContext from '../../window/WindowBrowserContext.js';
 export default class HTMLElement extends Element {
 	// Public properties
 	public declare cloneNode: (deep?: boolean) => HTMLElement;
+	public static observedAttributes?: string[];
 
 	// Events
 	public oncopy: (event: Event) => void | null = null;
@@ -492,6 +493,25 @@ export default class HTMLElement extends Element {
 		this.setAttribute('popover', value);
 	}
 
+	/**
+	 * Connected callback.
+	 */
+	public connectedCallback?(): void;
+
+	/**
+	 * Disconnected callback.
+	 */
+	public disconnectedCallback?(): void;
+
+	/**
+	 * Attribute changed callback.
+	 *
+	 * @param name Name.
+	 * @param oldValue Old value.
+	 * @param newValue New value.
+	 */
+	public attributeChangedCallback?(name: string, oldValue: string, newValue: string): void;
+
 	/**
 	 * Triggers a click event.
 	 */
@@ -548,7 +568,7 @@ export default class HTMLElement extends Element {
 				const callback = this.#onCustomElementConnected.bind(this);
 				const callbacks = allCallbacks.get(localName);
 				if (callbacks) {
-					callbacks.push(callback);
+					callbacks.unshift(callback);
 				} else {
 					allCallbacks.set(localName, [callback]);
 				}
@@ -587,6 +607,59 @@ export default class HTMLElement extends Element {
 		super[PropertySymbol.disconnectedFromNode]();
 	}
 
+	/**
+	 * @override
+	 */
+	public override [PropertySymbol.connectedToDocument](): void {
+		super[PropertySymbol.connectedToDocument]();
+
+		this[PropertySymbol.window][PropertySymbol.customElementReactionStack].enqueueReaction(
+			this,
+			'connectedCallback'
+		);
+	}
+
+	/**
+	 * @override
+	 */
+	public override [PropertySymbol.disconnectedFromDocument](): void {
+		super[PropertySymbol.disconnectedFromDocument]();
+
+		this[PropertySymbol.window][PropertySymbol.customElementReactionStack].enqueueReaction(
+			this,
+			'disconnectedCallback'
+		);
+	}
+
+	/**
+	 * @override
+	 */
+	public override [PropertySymbol.onSetAttribute](
+		attribute: Attr,
+		replacedAttribute: Attr | null
+	): void {
+		super[PropertySymbol.onSetAttribute](attribute, replacedAttribute);
+
+		this[PropertySymbol.window][PropertySymbol.customElementReactionStack].enqueueReaction(
+			this,
+			'attributeChangedCallback',
+			[attribute.name, replacedAttribute?.value ?? null, attribute.value]
+		);
+	}
+
+	/**
+	 * @override
+	 */
+	public override [PropertySymbol.onRemoveAttribute](removedAttribute: Attr): void {
+		super[PropertySymbol.onRemoveAttribute](removedAttribute);
+
+		this[PropertySymbol.window][PropertySymbol.customElementReactionStack].enqueueReaction(
+			this,
+			'attributeChangedCallback',
+			[removedAttribute.name, removedAttribute.value, null]
+		);
+	}
+
 	/**
 	 * Triggered when a custom element is connected to the DOM.
 	 */
@@ -595,6 +668,7 @@ export default class HTMLElement extends Element {
 			return;
 		}
 
+		const window = this[PropertySymbol.window];
 		const localName = this[PropertySymbol.localName];
 		const newElement = <HTMLElement>this[PropertySymbol.ownerDocument].createElement(localName);
 		const newCache = newElement[PropertySymbol.cache];
@@ -604,7 +678,6 @@ export default class HTMLElement extends Element {
 		newElement[PropertySymbol.childNodes] = null;
 		newElement[PropertySymbol.children] = null;
 		newElement[PropertySymbol.isConnected] = this[PropertySymbol.isConnected];
-
 		newElement[PropertySymbol.rootNode] = this[PropertySymbol.rootNode];
 		newElement[PropertySymbol.formNode] = this[PropertySymbol.formNode];
 		newElement[PropertySymbol.parentNode] = this[PropertySymbol.parentNode];
@@ -619,19 +692,25 @@ export default class HTMLElement extends Element {
 		newElement[PropertySymbol.attributes][PropertySymbol.namespaceItems] =
 			this[PropertySymbol.attributes][PropertySymbol.namespaceItems];
 
-		for (const attr of newElement[PropertySymbol.attributes][PropertySymbol.namedItems].values()) {
+		for (const attr of newElement[PropertySymbol.attributes][
+			PropertySymbol.namespaceItems
+		].values()) {
 			attr[PropertySymbol.ownerElement] = newElement;
 		}
 
+		this[PropertySymbol.clearCache]();
+
 		this[PropertySymbol.nodeArray] = [];
 		this[PropertySymbol.elementArray] = [];
 		this[PropertySymbol.childNodes] = null;
 		this[PropertySymbol.children] = null;
 
+		this[PropertySymbol.parentNode] = null;
 		this[PropertySymbol.rootNode] = null;
 		this[PropertySymbol.formNode] = null;
 		this[PropertySymbol.selectNode] = null;
 		this[PropertySymbol.textAreaNode] = null;
+
 		this[PropertySymbol.mutationListeners] = [];
 		this[PropertySymbol.isValue] = null;
 		this[PropertySymbol.cache] = newCache;
@@ -639,32 +718,35 @@ export default class HTMLElement extends Element {
 		this[PropertySymbol.attributes][PropertySymbol.namedItems] = new Map();
 		this[PropertySymbol.attributes][PropertySymbol.namespaceItems] = new Map();
 
-		const parentChildNodes = this[PropertySymbol.parentNode][PropertySymbol.nodeArray];
-		const parentChildElements = this[PropertySymbol.parentNode][PropertySymbol.elementArray];
+		for (const node of newElement[PropertySymbol.nodeArray]) {
+			node[PropertySymbol.parentNode] = newElement;
+		}
+
+		const parentChildNodes = newElement[PropertySymbol.parentNode][PropertySymbol.nodeArray];
+		const parentChildElements = newElement[PropertySymbol.parentNode][PropertySymbol.elementArray];
+
 		parentChildNodes[parentChildNodes.indexOf(this)] = newElement;
 		parentChildElements[parentChildElements.indexOf(this)] = newElement;
 
-		if (newElement[PropertySymbol.isConnected] && newElement.connectedCallback) {
-			const result = <void | Promise<void>>newElement.connectedCallback();
-			/**
-			 * It is common to import dependencies in the connectedCallback() method of web components.
-			 * As Happy DOM doesn't have support for dynamic imports yet, this is a temporary solution to wait for imports in connectedCallback().
-			 *
-			 * @see https://github.com/capricorn86/happy-dom/issues/1442
-			 */
-			if (result instanceof Promise) {
-				const asyncTaskManager = new WindowBrowserContext(
-					this[PropertySymbol.window]
-				).getAsyncTaskManager();
-				if (asyncTaskManager) {
-					const taskID = asyncTaskManager.startTask();
-					result
-						.then(() => asyncTaskManager.endTask(taskID))
-						.catch(() => asyncTaskManager.endTask(taskID));
-				}
+		const allCallbacks = window.customElements[PropertySymbol.callbacks];
+		const callbacks = allCallbacks.get(localName);
+
+		if (callbacks && this.#customElementDefineCallback) {
+			const index = callbacks.indexOf(this.#customElementDefineCallback);
+
+			if (index !== -1) {
+				callbacks.splice(index, 1);
+			}
+
+			if (!callbacks.length) {
+				allCallbacks.delete(localName);
 			}
+
+			this.#customElementDefineCallback = null;
 		}
 
-		this[PropertySymbol.disconnectedFromDocument]();
+		if (newElement[PropertySymbol.isConnected]) {
+			newElement[PropertySymbol.connectedToDocument]();
+		}
 	}
 }

package/src/nodes/html-field-set-element/HTMLFieldSetElement.ts

@@ -56,10 +56,7 @@ export default class HTMLFieldSetElement 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;
 		}

package/src/nodes/html-form-element/HTMLFormElement.ts

@@ -13,7 +13,7 @@ import THTMLFormControlElement from './THTMLFormControlElement.js';
 import QuerySelector from '../../query-selector/QuerySelector.js';
 import RadioNodeList from './RadioNodeList.js';
 import WindowBrowserContext from '../../window/WindowBrowserContext.js';
-import ClassMethodBinder from '../../ClassMethodBinder.js';
+import ClassMethodBinder from '../../utilities/ClassMethodBinder.js';
 import Node from '../node/Node.js';
 import Element from '../element/Element.js';
 import EventTarget from '../../event/EventTarget.js';
@@ -112,13 +112,7 @@ export default class HTMLFormElement extends HTMLElement {
 
 				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;
@@ -162,13 +156,7 @@ export default class HTMLFormElement extends HTMLElement {
 
 				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 {
@@ -503,10 +491,7 @@ export default class HTMLFormElement extends HTMLElement {
 		);
 
 		if (this[PropertySymbol.isConnected]) {
-			const id =
-				this[PropertySymbol.attributes][PropertySymbol.namedItems].get('id')?.[
-					PropertySymbol.value
-				];
+			const id = this.getAttribute('id');
 			if (id) {
 				for (const element of <THTMLFormControlElement[]>(
 					QuerySelector.querySelectorAll(
@@ -539,14 +524,7 @@ export default class HTMLFormElement extends HTMLElement {
 		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) {
 				namedItems.push(item);
 			}
 		}

package/src/nodes/html-iframe-element/HTMLIFrameElement.ts

@@ -267,7 +267,7 @@ export default class HTMLIFrameElement extends HTMLElement {
 		if (
 			attribute[PropertySymbol.name] === 'src' &&
 			attribute[PropertySymbol.value] &&
-			!this[PropertySymbol.attributes][PropertySymbol.namedItems].has('srcdoc') &&
+			!this.hasAttribute('srcdoc') &&
 			attribute[PropertySymbol.value] !== replacedAttribute?.[PropertySymbol.value]
 		) {
 			this.#loadPage();

package/src/nodes/html-input-element/HTMLInputElement.ts

@@ -206,10 +206,7 @@ export default class HTMLInputElement 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;
 		}

package/src/nodes/html-media-element/TextTrackList.ts

@@ -1,7 +1,7 @@
 import TextTrack from './TextTrack.js';
 import EventTarget from '../../event/EventTarget.js';
 import * as PropertySymbol from '../../PropertySymbol.js';
-import ClassMethodBinder from '../../ClassMethodBinder.js';
+import ClassMethodBinder from '../../utilities/ClassMethodBinder.js';
 
 /**
  * TextTrackList.

package/src/nodes/html-object-element/HTMLObjectElement.ts

@@ -69,10 +69,7 @@ export default class HTMLObjectElement 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;
 		}

package/src/nodes/html-output-element/HTMLOutputElement.ts

@@ -44,10 +44,7 @@ export default class HTMLOutputElement 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;
 		}

package/src/nodes/html-script-element/HTMLScriptElement.ts

@@ -249,7 +249,10 @@ export default class HTMLScriptElement extends HTMLElement {
 	async #loadScript(url: string): Promise<void> {
 		const window = this[PropertySymbol.window];
 		const browserFrame = new WindowBrowserContext(window).getBrowserFrame();
-		const async = this.getAttribute('async') !== null;
+		const async =
+			this.getAttribute('async') !== null ||
+			this.getAttribute('defer') !== null ||
+			this.getAttribute('type') === 'module';
 
 		if (!browserFrame) {
 			return;

package/src/nodes/html-select-element/HTMLSelectElement.ts

@@ -11,7 +11,7 @@ import HTMLCollection from '../element/HTMLCollection.js';
 import NodeTypeEnum from '../node/NodeTypeEnum.js';
 import QuerySelector from '../../query-selector/QuerySelector.js';
 import NodeList from '../node/NodeList.js';
-import ClassMethodBinder from '../../ClassMethodBinder.js';
+import ClassMethodBinder from '../../utilities/ClassMethodBinder.js';
 import Node from '../node/Node.js';
 import Element from '../element/Element.js';
 import EventTarget from '../../event/EventTarget.js';
@@ -493,10 +493,7 @@ export default class HTMLSelectElement 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;
 		}

package/src/nodes/html-table-element/HTMLTableElement.ts

@@ -286,7 +286,14 @@ export default class HTMLTableElement extends HTMLElement {
 		const row = this[PropertySymbol.ownerDocument].createElement('tr');
 
 		if (index === -1 || index === rows.length) {
-			this.appendChild(row);
+			const tbody = QuerySelector.querySelector(this, 'tbody');
+			if (tbody) {
+				tbody.appendChild(row);
+			} else {
+				const tbody = this[PropertySymbol.ownerDocument].createElement('tbody');
+				tbody.appendChild(row);
+				this.appendChild(tbody);
+			}
 			return row;
 		}
 

package/src/nodes/html-table-row-element/HTMLTableRowElement.ts

@@ -95,7 +95,7 @@ export default class HTMLTableRowElement extends HTMLElement {
 			);
 		}
 
-		const cell = this[PropertySymbol.ownerDocument].createElement('th');
+		const cell = this[PropertySymbol.ownerDocument].createElement('td');
 
 		if (index === -1 || index === cells.length) {
 			this.appendChild(cell);

package/src/nodes/html-template-element/HTMLTemplateElement.ts

@@ -2,9 +2,9 @@ import HTMLElement from '../html-element/HTMLElement.js';
 import * as PropertySymbol from '../../PropertySymbol.js';
 import DocumentFragment from '../document-fragment/DocumentFragment.js';
 import Node from '../node/Node.js';
-import XMLSerializer from '../../xml-serializer/XMLSerializer.js';
-import XMLParser from '../../xml-parser/XMLParser.js';
 import ShadowRoot from '../shadow-root/ShadowRoot.js';
+import HTMLSerializer from '../../html-serializer/HTMLSerializer.js';
+import HTMLParser from '../../html-parser/HTMLParser.js';
 
 /**
  * HTML Template Element.
@@ -47,9 +47,7 @@ export default class HTMLTemplateElement extends HTMLElement {
 			content.removeChild(childNodes[0]);
 		}
 
-		XMLParser.parse(this[PropertySymbol.ownerDocument], html, {
-			rootNode: this[PropertySymbol.content]
-		});
+		new HTMLParser(this[PropertySymbol.window]).parse(html, this[PropertySymbol.content]);
 	}
 
 	/**
@@ -71,18 +69,18 @@ export default class HTMLTemplateElement extends HTMLElement {
 	 * @override
 	 */
 	public override getInnerHTML(_options?: { includeShadowRoots?: boolean }): string {
-		const xmlSerializer = new XMLSerializer();
+		const serializer = new HTMLSerializer();
 
 		// Options should be ignored as shadow roots should not be serialized for HTMLTemplateElement.
 
 		const content = <DocumentFragment>this[PropertySymbol.content];
-		let xml = '';
+		let html = '';
 
 		for (const node of content[PropertySymbol.nodeArray]) {
-			xml += xmlSerializer.serializeToString(node);
+			html += serializer.serializeToString(node);
 		}
 
-		return xml;
+		return html;
 	}
 
 	/**
@@ -92,25 +90,25 @@ export default class HTMLTemplateElement extends HTMLElement {
 		serializableShadowRoots?: boolean;
 		shadowRoots?: ShadowRoot[];
 	}): string {
-		const xmlSerializer = new XMLSerializer();
+		const serializer = new HTMLSerializer();
 
 		// Options should be ignored as shadow roots should not be serialized for HTMLTemplateElement.
 
 		const content = <DocumentFragment>this[PropertySymbol.content];
-		let xml = '';
+		let html = '';
 
 		for (const node of content[PropertySymbol.nodeArray]) {
-			xml += xmlSerializer.serializeToString(node);
+			html += serializer.serializeToString(node);
 		}
 
-		return xml;
+		return html;
 	}
 
 	/**
 	 * @override
 	 */
-	public override [PropertySymbol.appendChild](node: Node, isDuringParsing = false): Node {
-		return this[PropertySymbol.content][PropertySymbol.appendChild](node, isDuringParsing);
+	public override [PropertySymbol.appendChild](node: Node, disableValidations = false): Node {
+		return this[PropertySymbol.content][PropertySymbol.appendChild](node, disableValidations);
 	}
 
 	/**
@@ -123,8 +121,16 @@ export default class HTMLTemplateElement extends HTMLElement {
 	/**
 	 * @override
 	 */
-	public override [PropertySymbol.insertBefore](newNode: Node, referenceNode: Node): Node {
-		return this[PropertySymbol.content][PropertySymbol.insertBefore](newNode, referenceNode);
+	public override [PropertySymbol.insertBefore](
+		newNode: Node,
+		referenceNode: Node,
+		disableValidations = false
+	): Node {
+		return this[PropertySymbol.content][PropertySymbol.insertBefore](
+			newNode,
+			referenceNode,
+			disableValidations
+		);
 	}
 
 	/**

package/src/nodes/html-text-area-element/HTMLTextAreaElement.ts

@@ -413,10 +413,7 @@ export default class HTMLTextAreaElement 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;
 		}