From ad3872d4c5841e6ac5cd00969e7b9cd3d46c1a03 Mon Sep 17 00:00:00 2001
From: David Ortner <david@ortner.se>
Date: Fri, 27 Dec 2024 02:00:07 +0100
Subject: [PATCH] BREAKING CHANGE: [#1615] Improves XML and HTML parsing
 (#1617)

---
 package-lock.json                             |    2 +-
 packages/happy-dom/package.json               |    1 -
 packages/happy-dom/src/PropertySymbol.ts      |    5 +-
 .../happy-dom/src/config/HTMLElementConfig.ts |   70 +-
 .../HTMLElementConfigContentModelEnum.ts      |    3 +
 packages/happy-dom/src/config/NamespaceURI.ts |    2 +
 .../css/declaration/CSSStyleDeclaration.ts    |    5 +-
 .../CSSStyleDeclarationComputedStyle.ts       |    6 +-
 .../CustomElementReactionStack.ts             |   81 +
 .../custom-element/CustomElementRegistry.ts   |   89 +-
 .../custom-element/CustomElementUtility.ts    |   34 +
 .../ICustomElementDefinition.ts               |   16 +
 .../happy-dom/src/dom-parser/DOMParser.ts     |   80 +-
 packages/happy-dom/src/dom/DOMStringMap.ts    |   22 +-
 packages/happy-dom/src/dom/DOMTokenList.ts    |    2 +-
 .../src/exception/DOMExceptionNameEnum.ts     |    3 +-
 packages/happy-dom/src/history/History.ts     |   12 +-
 .../happy-dom/src/html-parser/HTMLParser.ts   |  864 +++++++
 .../src/html-serializer/HTMLSerializer.ts     |  162 ++
 .../happy-dom/src/nodes/document/Document.ts  |  255 +-
 .../happy-dom/src/nodes/element/Element.ts    |  143 +-
 .../src/nodes/element/HTMLCollection.ts       |   35 +-
 .../src/nodes/element/NamedNodeMap.ts         |  130 +-
 .../nodes/element/NamedNodeMapProxyFactory.ts |   27 +-
 .../html-button-element/HTMLButtonElement.ts  |    5 +-
 .../src/nodes/html-document/HTMLDocument.ts   |   60 +-
 .../src/nodes/html-element/HTMLElement.ts     |  132 +-
 .../HTMLFieldSetElement.ts                    |    5 +-
 .../html-form-element/HTMLFormElement.ts      |   32 +-
 .../html-iframe-element/HTMLIFrameElement.ts  |    2 +-
 .../html-input-element/HTMLInputElement.ts    |    5 +-
 .../nodes/html-media-element/TextTrackList.ts |    2 +-
 .../html-object-element/HTMLObjectElement.ts  |    5 +-
 .../html-output-element/HTMLOutputElement.ts  |    5 +-
 .../html-script-element/HTMLScriptElement.ts  |    5 +-
 .../html-select-element/HTMLSelectElement.ts  |    7 +-
 .../html-table-element/HTMLTableElement.ts    |    9 +-
 .../HTMLTableRowElement.ts                    |    2 +-
 .../HTMLTemplateElement.ts                    |   40 +-
 .../HTMLTextAreaElement.ts                    |    5 +-
 packages/happy-dom/src/nodes/node/Node.ts     |  127 +-
 packages/happy-dom/src/nodes/node/NodeList.ts |    2 +-
 .../happy-dom/src/nodes/node/NodeUtility.ts   |    7 +-
 .../nodes/parent-node/ParentNodeUtility.ts    |   12 +-
 .../src/nodes/shadow-root/ShadowRoot.ts       |   16 +-
 .../src/nodes/xml-document/XMLDocument.ts     |    6 +-
 .../src/query-selector/SelectorItem.ts        |    3 +-
 packages/happy-dom/src/range/Range.ts         |    6 +-
 packages/happy-dom/src/storage/Storage.ts     |    2 +-
 packages/happy-dom/src/svg/SVGLengthList.ts   |    2 +-
 packages/happy-dom/src/svg/SVGNumberList.ts   |    2 +-
 packages/happy-dom/src/svg/SVGPointList.ts    |    2 +-
 packages/happy-dom/src/svg/SVGStringList.ts   |    2 +-
 .../happy-dom/src/svg/SVGTransformList.ts     |    2 +-
 .../happy-dom/src/tree-walker/NodeIterator.ts |   52 +-
 .../happy-dom/src/tree-walker/TreeWalker.ts   |   12 +-
 .../src/{ => utilities}/ClassMethodBinder.ts  |    0
 .../src/{ => utilities}/StringUtility.ts      |    0
 .../src/utilities/XMLEncodeUtility.ts         |  127 +
 .../happy-dom/src/window/BrowserWindow.ts     |   23 +-
 .../src/window/WindowErrorUtility.ts          |    2 +-
 .../src/xml-http-request/XMLHttpRequest.ts    |    4 +-
 .../XMLHttpRequestResponseDataParser.ts       |    2 +-
 .../happy-dom/src/xml-parser/XMLParser.ts     |  940 +++++---
 .../src/xml-serializer/XMLSerializer.ts       |  262 +-
 packages/happy-dom/test/CustomElement.ts      |    8 +
 .../CustomElementRegistry.test.ts             |   25 +-
 .../test/dom-parser/DOMParser.test.ts         |  212 +-
 .../test/html-parser/HTMLParser.test.ts       | 2108 +++++++++++++++++
 .../html-serializer/HTMLSerializer.test.ts    |  301 +++
 .../MutationObserver.test.ts                  |    2 +-
 .../test/nodes/document/Document.test.ts      |  147 +-
 .../test/nodes/element/Element.test.ts        |   38 +-
 .../test/nodes/element/NamedNodeMap.test.ts   |   21 +
 .../nodes/html-element/HTMLElement.test.ts    |    4 +
 .../HTMLIFrameElement.test.ts                 |    2 +-
 .../HTMLLabelElement.test.ts                  |    4 +-
 .../HTMLScriptElement.test.ts                 |  131 +-
 .../HTMLTableElement.test.ts                  |   65 +-
 .../HTMLTableRowElement.test.ts               |   22 +-
 .../HTMLTemplateElement.test.ts               |   10 +-
 .../happy-dom/test/nodes/node/Node.test.ts    |   49 +-
 .../test/nodes/node/NodeUtility.test.ts       |   21 +-
 .../test/query-selector/QuerySelector.test.ts |    2 +-
 .../test/tree-walker/NodeIterator.test.ts     |   33 +-
 .../test/tree-walker/TreeWalker.test.ts       |    5 +-
 .../test/window/BrowserWindow.test.ts         |   21 +
 .../xml-http-request/XMLHttpRequest.test.ts   |    6 +-
 .../test/xml-parser/XMLParser.test.ts         | 1268 ++++++----
 .../test/xml-parser/data/XMLParserHTML.ts     |   27 -
 .../test/xml-serializer/XMLSerializer.test.ts |  437 ++--
 .../test/utilities/TestFunctions.js           |    2 +-
 92 files changed, 6945 insertions(+), 2011 deletions(-)
 create mode 100644 packages/happy-dom/src/custom-element/CustomElementReactionStack.ts
 create mode 100644 packages/happy-dom/src/custom-element/CustomElementUtility.ts
 create mode 100644 packages/happy-dom/src/custom-element/ICustomElementDefinition.ts
 create mode 100755 packages/happy-dom/src/html-parser/HTMLParser.ts
 create mode 100644 packages/happy-dom/src/html-serializer/HTMLSerializer.ts
 rename packages/happy-dom/src/{ => utilities}/ClassMethodBinder.ts (100%)
 rename packages/happy-dom/src/{ => utilities}/StringUtility.ts (100%)
 create mode 100644 packages/happy-dom/src/utilities/XMLEncodeUtility.ts
 create mode 100644 packages/happy-dom/test/html-parser/HTMLParser.test.ts
 create mode 100644 packages/happy-dom/test/html-serializer/HTMLSerializer.test.ts
 delete mode 100644 packages/happy-dom/test/xml-parser/data/XMLParserHTML.ts

diff --git a/package-lock.json b/package-lock.json
index a57a3c83b..678639bd9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4892,6 +4892,7 @@
 			"version": "4.5.0",
 			"resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
 			"integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+			"dev": true,
 			"license": "BSD-2-Clause",
 			"engines": {
 				"node": ">=0.12"
@@ -11798,7 +11799,6 @@
 			"version": "0.0.0",
 			"license": "MIT",
 			"dependencies": {
-				"entities": "^4.5.0",
 				"webidl-conversions": "^7.0.0",
 				"whatwg-mimetype": "^3.0.0"
 			},
diff --git a/packages/happy-dom/package.json b/packages/happy-dom/package.json
index f7877cc28..9a817ab13 100644
--- a/packages/happy-dom/package.json
+++ b/packages/happy-dom/package.json
@@ -77,7 +77,6 @@
 		"test:debug": "vitest run --inspect-brk --no-file-parallelism"
 	},
 	"dependencies": {
-		"entities": "^4.5.0",
 		"webidl-conversions": "^7.0.0",
 		"whatwg-mimetype": "^3.0.0"
 	},
diff --git a/packages/happy-dom/src/PropertySymbol.ts b/packages/happy-dom/src/PropertySymbol.ts
index bb5b5e214..32fbe3e4a 100644
--- a/packages/happy-dom/src/PropertySymbol.ts
+++ b/packages/happy-dom/src/PropertySymbol.ts
@@ -41,7 +41,6 @@ export const listeners = Symbol('listeners');
 export const namedItems = Symbol('namedItems');
 export const nextActiveElement = Symbol('nextActiveElement');
 export const observeMutations = Symbol('observeMutations');
-export const observedAttributes = Symbol('observedAttributes');
 export const mutationListeners = Symbol('mutationListeners');
 export const ownerDocument = Symbol('ownerDocument');
 export const ownerElement = Symbol('ownerElement');
@@ -375,3 +374,7 @@ export const getLength = Symbol('getLength');
 export const currentScale = Symbol('currentScale');
 export const rotate = Symbol('rotate');
 export const bindMethods = Symbol('bindMethods');
+export const xmlProcessingInstruction = Symbol('xmlProcessingInstruction');
+export const root = Symbol('root');
+export const filterNode = Symbol('filterNode');
+export const customElementReactionStack = Symbol('customElementReactionStack');
diff --git a/packages/happy-dom/src/config/HTMLElementConfig.ts b/packages/happy-dom/src/config/HTMLElementConfig.ts
index 27a1e10bb..76fb7d69a 100644
--- a/packages/happy-dom/src/config/HTMLElementConfig.ts
+++ b/packages/happy-dom/src/config/HTMLElementConfig.ts
@@ -4,7 +4,17 @@ import HTMLElementConfigContentModelEnum from './HTMLElementConfigContentModelEn
  * @see https://html.spec.whatwg.org/multipage/indices.html
  */
 export default <
-	{ [key: string]: { className: string; contentModel: HTMLElementConfigContentModelEnum } }
+	{
+		[key: string]: {
+			className: string;
+			contentModel: HTMLElementConfigContentModelEnum;
+			forbiddenDescendants?: string[];
+			permittedDescendants?: string[];
+			permittedParents?: string[];
+			addPermittedParent?: string;
+			moveForbiddenDescendant?: { exclude: string[] };
+		};
+	}
 >{
 	a: {
 		className: 'HTMLAnchorElement',
@@ -116,7 +126,7 @@ export default <
 	},
 	caption: {
 		className: 'HTMLTableCaptionElement',
-		contentModel: HTMLElementConfigContentModelEnum.anyDescendants
+		contentModel: HTMLElementConfigContentModelEnum.textOrComments
 	},
 	cite: {
 		className: 'HTMLElement',
@@ -128,11 +138,13 @@ export default <
 	},
 	col: {
 		className: 'HTMLTableColElement',
-		contentModel: HTMLElementConfigContentModelEnum.noDescendants
+		contentModel: HTMLElementConfigContentModelEnum.noDescendants,
+		permittedParents: ['colgroup']
 	},
 	colgroup: {
 		className: 'HTMLTableColElement',
-		contentModel: HTMLElementConfigContentModelEnum.anyDescendants
+		contentModel: HTMLElementConfigContentModelEnum.permittedDescendants,
+		permittedDescendants: ['col']
 	},
 	data: {
 		className: 'HTMLDataElement',
@@ -144,7 +156,8 @@ export default <
 	},
 	dd: {
 		className: 'HTMLElement',
-		contentModel: HTMLElementConfigContentModelEnum.noFirstLevelSelfDescendants
+		contentModel: HTMLElementConfigContentModelEnum.noForbiddenFirstLevelDescendants,
+		forbiddenDescendants: ['dt', 'dd']
 	},
 	del: {
 		className: 'HTMLModElement',
@@ -172,7 +185,8 @@ export default <
 	},
 	dt: {
 		className: 'HTMLElement',
-		contentModel: HTMLElementConfigContentModelEnum.noFirstLevelSelfDescendants
+		contentModel: HTMLElementConfigContentModelEnum.noForbiddenFirstLevelDescendants,
+		forbiddenDescendants: ['dt', 'dd']
 	},
 	em: {
 		className: 'HTMLElement',
@@ -304,11 +318,12 @@ export default <
 	},
 	optgroup: {
 		className: 'HTMLOptGroupElement',
-		contentModel: HTMLElementConfigContentModelEnum.anyDescendants
+		contentModel: HTMLElementConfigContentModelEnum.noFirstLevelSelfDescendants
 	},
 	option: {
 		className: 'HTMLOptionElement',
-		contentModel: HTMLElementConfigContentModelEnum.noFirstLevelSelfDescendants
+		contentModel: HTMLElementConfigContentModelEnum.noForbiddenFirstLevelDescendants,
+		forbiddenDescendants: ['option', 'optgroup']
 	},
 	output: {
 		className: 'HTMLOutputElement',
@@ -344,11 +359,13 @@ export default <
 	},
 	rp: {
 		className: 'HTMLElement',
-		contentModel: HTMLElementConfigContentModelEnum.anyDescendants
+		contentModel: HTMLElementConfigContentModelEnum.noForbiddenFirstLevelDescendants,
+		forbiddenDescendants: ['rp', 'rt']
 	},
 	rt: {
 		className: 'HTMLElement',
-		contentModel: HTMLElementConfigContentModelEnum.anyDescendants
+		contentModel: HTMLElementConfigContentModelEnum.noForbiddenFirstLevelDescendants,
+		forbiddenDescendants: ['rp', 'rt']
 	},
 	rtc: {
 		className: 'HTMLElement',
@@ -404,27 +421,42 @@ export default <
 	},
 	table: {
 		className: 'HTMLTableElement',
-		contentModel: HTMLElementConfigContentModelEnum.noFirstLevelSelfDescendants
+		contentModel: HTMLElementConfigContentModelEnum.permittedDescendants,
+		permittedDescendants: ['caption', 'colgroup', 'thead', 'tfoot', 'tbody'],
+		moveForbiddenDescendant: { exclude: [] }
 	},
 	tbody: {
 		className: 'HTMLTableSectionElement',
-		contentModel: HTMLElementConfigContentModelEnum.anyDescendants
+		contentModel: HTMLElementConfigContentModelEnum.permittedDescendants,
+		permittedDescendants: ['tr'],
+		permittedParents: ['table'],
+		moveForbiddenDescendant: { exclude: ['caption', 'colgroup', 'thead', 'tfoot', 'tbody'] }
 	},
 	td: {
 		className: 'HTMLTableCellElement',
-		contentModel: HTMLElementConfigContentModelEnum.anyDescendants
+		contentModel: HTMLElementConfigContentModelEnum.noForbiddenFirstLevelDescendants,
+		forbiddenDescendants: ['td', 'th', 'tr', 'tbody', 'tfoot', 'thead'],
+		permittedParents: ['tr']
 	},
 	tfoot: {
 		className: 'HTMLTableSectionElement',
-		contentModel: HTMLElementConfigContentModelEnum.anyDescendants
+		contentModel: HTMLElementConfigContentModelEnum.permittedDescendants,
+		permittedDescendants: ['tr'],
+		permittedParents: ['table'],
+		moveForbiddenDescendant: { exclude: ['caption', 'colgroup', 'thead', 'tfoot', 'tbody'] }
 	},
 	th: {
 		className: 'HTMLTableCellElement',
-		contentModel: HTMLElementConfigContentModelEnum.anyDescendants
+		contentModel: HTMLElementConfigContentModelEnum.noForbiddenFirstLevelDescendants,
+		forbiddenDescendants: ['td', 'th', 'tr', 'tbody', 'tfoot', 'thead'],
+		permittedParents: ['tr']
 	},
 	thead: {
 		className: 'HTMLTableSectionElement',
-		contentModel: HTMLElementConfigContentModelEnum.anyDescendants
+		contentModel: HTMLElementConfigContentModelEnum.permittedDescendants,
+		permittedDescendants: ['tr'],
+		permittedParents: ['table'],
+		moveForbiddenDescendant: { exclude: ['caption', 'colgroup', 'thead', 'tfoot', 'tbody'] }
 	},
 	time: {
 		className: 'HTMLTimeElement',
@@ -436,7 +468,11 @@ export default <
 	},
 	tr: {
 		className: 'HTMLTableRowElement',
-		contentModel: HTMLElementConfigContentModelEnum.anyDescendants
+		contentModel: HTMLElementConfigContentModelEnum.permittedDescendants,
+		permittedDescendants: ['td', 'th'],
+		permittedParents: ['tbody', 'tfoot', 'thead'],
+		addPermittedParent: 'tbody',
+		moveForbiddenDescendant: { exclude: ['caption', 'colgroup', 'thead', 'tfoot', 'tbody', 'tr'] }
 	},
 	track: {
 		className: 'HTMLTrackElement',
diff --git a/packages/happy-dom/src/config/HTMLElementConfigContentModelEnum.ts b/packages/happy-dom/src/config/HTMLElementConfigContentModelEnum.ts
index d0c816ae5..1c609f61f 100644
--- a/packages/happy-dom/src/config/HTMLElementConfigContentModelEnum.ts
+++ b/packages/happy-dom/src/config/HTMLElementConfigContentModelEnum.ts
@@ -2,7 +2,10 @@ enum HTMLElementConfigContentModelEnum {
 	rawText = 'rawText',
 	noSelfDescendants = 'noSelfDescendants',
 	noFirstLevelSelfDescendants = 'noFirstLevelSelfDescendants',
+	noForbiddenFirstLevelDescendants = 'noForbiddenFirstLevelDescendants',
 	noDescendants = 'noDescendants',
+	permittedDescendants = 'permittedDescendants',
+	textOrComments = 'textOrComments',
 	anyDescendants = 'anyDescendants'
 }
 
diff --git a/packages/happy-dom/src/config/NamespaceURI.ts b/packages/happy-dom/src/config/NamespaceURI.ts
index 8e57b1559..999d5d59e 100644
--- a/packages/happy-dom/src/config/NamespaceURI.ts
+++ b/packages/happy-dom/src/config/NamespaceURI.ts
@@ -2,5 +2,7 @@ export default {
 	html: 'http://www.w3.org/1999/xhtml',
 	svg: 'http://www.w3.org/2000/svg',
 	mathML: 'http://www.w3.org/1998/Math/MathML',
+	xml: 'http://www.w3.org/XML/1998/namespace',
+	xlink: 'http://www.w3.org/1999/xlink',
 	xmlns: 'http://www.w3.org/2000/xmlns/'
 };
diff --git a/packages/happy-dom/src/css/declaration/CSSStyleDeclaration.ts b/packages/happy-dom/src/css/declaration/CSSStyleDeclaration.ts
index 578a6d7e0..1649e0b5d 100644
--- a/packages/happy-dom/src/css/declaration/CSSStyleDeclaration.ts
+++ b/packages/happy-dom/src/css/declaration/CSSStyleDeclaration.ts
@@ -4963,10 +4963,7 @@ export default class CSSStyleDeclaration {
 			return new CSSStyleDeclarationComputedStyle(element).getComputedStyle();
 		}
 
-		const attributeValue =
-			element[PropertySymbol.attributes][PropertySymbol.namedItems].get('style')?.[
-				PropertySymbol.value
-			];
+		const attributeValue = element.getAttribute('style') || '';
 
 		if (cache.attributeValue !== attributeValue) {
 			cache.propertyManager = new CSSStyleDeclarationPropertyManager({ cssText: attributeValue });
diff --git a/packages/happy-dom/src/css/declaration/computed-style/CSSStyleDeclarationComputedStyle.ts b/packages/happy-dom/src/css/declaration/computed-style/CSSStyleDeclarationComputedStyle.ts
index b78051caf..31159d4a9 100644
--- a/packages/happy-dom/src/css/declaration/computed-style/CSSStyleDeclarationComputedStyle.ts
+++ b/packages/happy-dom/src/css/declaration/computed-style/CSSStyleDeclarationComputedStyle.ts
@@ -207,12 +207,10 @@ export default class CSSStyleDeclarationComputedStyle {
 				elementCSSText += cssText.cssText;
 			}
 
-			const elementStyleAttribute = (<Element>parentElement.element)[PropertySymbol.attributes][
-				PropertySymbol.namedItems
-			].get('style');
+			const elementStyleAttribute = (<Element>parentElement.element).getAttribute('style');
 
 			if (elementStyleAttribute) {
-				elementCSSText += elementStyleAttribute[PropertySymbol.value];
+				elementCSSText += elementStyleAttribute;
 			}
 
 			const rulesAndProperties = CSSStyleDeclarationCSSParser.parse(elementCSSText);
diff --git a/packages/happy-dom/src/custom-element/CustomElementReactionStack.ts b/packages/happy-dom/src/custom-element/CustomElementReactionStack.ts
new file mode 100644
index 000000000..31ad292fa
--- /dev/null
+++ b/packages/happy-dom/src/custom-element/CustomElementReactionStack.ts
@@ -0,0 +1,81 @@
+import HTMLElement from '../nodes/html-element/HTMLElement.js';
+import BrowserWindow from '../window/BrowserWindow.js';
+import * as PropertySymbol from '../PropertySymbol.js';
+import WindowBrowserContext from '../window/WindowBrowserContext.js';
+
+/**
+ * Custom element reaction stack.
+ *
+ * @see https://html.spec.whatwg.org/multipage/custom-elements.html#custom-element-reactions-stack
+ */
+export default class CustomElementReactionStack {
+	private window: BrowserWindow;
+
+	/**
+	 * Constructor.
+	 *
+	 * @param window Window.
+	 */
+	constructor(window: BrowserWindow) {
+		this.window = window;
+	}
+
+	/**
+	 * Enqueues a custom element reaction.
+	 *
+	 * @see https://html.spec.whatwg.org/multipage/custom-elements.html#enqueue-a-custom-element-callback-reaction
+	 * @see https://html.spec.whatwg.org/multipage/custom-elements.html#enqueue-an-element-on-the-appropriate-element-queue
+	 * @param element Element.
+	 * @param callbackName Callback name.
+	 * @param [args] Arguments.
+	 */
+	public enqueueReaction(element: HTMLElement, callbackName: string, args?: any[]): void {
+		// If a polyfill is used, [PropertySymbol.registry] may be undefined
+		const definition = this.window.customElements[PropertySymbol.registry]?.get(element.localName);
+
+		if (!definition) {
+			return;
+		}
+
+		// According to the spec, we should use a queue for each element and then invoke the reactions in the order they were enqueued asynchronously.
+		// However, the browser seem to always invoke the reactions synchronously.
+		// TODO: Can we find an example where the reactions are invoked asynchronously? In that case we should use a queue for those cases.
+
+		switch (callbackName) {
+			case 'connectedCallback':
+				if (definition.livecycleCallbacks.connectedCallback) {
+					const returnValue = definition.livecycleCallbacks.connectedCallback.call(element);
+
+					/**
+					 * 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 (returnValue instanceof Promise) {
+						const asyncTaskManager = new WindowBrowserContext(this.window).getAsyncTaskManager();
+						if (asyncTaskManager) {
+							const taskID = asyncTaskManager.startTask();
+							returnValue
+								.then(() => asyncTaskManager.endTask(taskID))
+								.catch(() => asyncTaskManager.endTask(taskID));
+						}
+					}
+				}
+				break;
+			case 'disconnectedCallback':
+				if (definition.livecycleCallbacks.disconnectedCallback) {
+					definition.livecycleCallbacks.disconnectedCallback.call(element);
+				}
+				break;
+			case 'attributeChangedCallback':
+				if (
+					definition.livecycleCallbacks.attributeChangedCallback &&
+					definition.observedAttributes.has(args[0])
+				) {
+					definition.livecycleCallbacks.attributeChangedCallback.apply(element, args);
+				}
+				break;
+		}
+	}
+}
diff --git a/packages/happy-dom/src/custom-element/CustomElementRegistry.ts b/packages/happy-dom/src/custom-element/CustomElementRegistry.ts
index 2cfdf6889..67a038890 100644
--- a/packages/happy-dom/src/custom-element/CustomElementRegistry.ts
+++ b/packages/happy-dom/src/custom-element/CustomElementRegistry.ts
@@ -3,14 +3,15 @@ import HTMLElement from '../nodes/html-element/HTMLElement.js';
 import Node from '../nodes/node/Node.js';
 import BrowserWindow from '../window/BrowserWindow.js';
 import NamespaceURI from '../config/NamespaceURI.js';
+import StringUtility from '../utilities/StringUtility.js';
+import CustomElementUtility from './CustomElementUtility.js';
+import ICustomElementDefinition from './ICustomElementDefinition.js';
 
 /**
  * Custom elements registry.
  */
 export default class CustomElementRegistry {
-	public [PropertySymbol.registry]: {
-		[k: string]: { elementClass: typeof HTMLElement; extends: string };
-	} = {};
+	public [PropertySymbol.registry]: Map<string, ICustomElementDefinition> = new Map();
 	public [PropertySymbol.classRegistry]: Map<typeof HTMLElement, string> = new Map();
 	public [PropertySymbol.callbacks]: Map<string, Array<() => void>> = new Map();
 	public [PropertySymbol.destroyed]: boolean = false;
@@ -45,13 +46,13 @@ export default class CustomElementRegistry {
 			return;
 		}
 
-		if (!this.#isValidCustomElementName(name)) {
+		if (!CustomElementUtility.isValidCustomElementName(name)) {
 			throw new this.#window.DOMException(
 				`Failed to execute 'define' on 'CustomElementRegistry': "${name}" is not a valid custom element name`
 			);
 		}
 
-		if (this[PropertySymbol.registry][name]) {
+		if (this[PropertySymbol.registry].has(name)) {
 			throw new this.#window.DOMException(
 				`Failed to execute 'define' on 'CustomElementRegistry': the name "${name}" has already been used with this registry`
 			);
@@ -63,7 +64,7 @@ export default class CustomElementRegistry {
 			);
 		}
 
-		const tagName = name.toUpperCase();
+		const tagName = StringUtility.asciiUpperCase(name);
 
 		elementClass.prototype[PropertySymbol.window] = this.#window;
 		elementClass.prototype[PropertySymbol.ownerDocument] = this.#window.document;
@@ -71,17 +72,28 @@ export default class CustomElementRegistry {
 		elementClass.prototype[PropertySymbol.localName] = name;
 		elementClass.prototype[PropertySymbol.namespaceURI] = NamespaceURI.html;
 
-		this[PropertySymbol.registry][name] = {
+		// ObservedAttributes should only be called once by CustomElementRegistry (see #117)
+		const observedAttributes: Set<string> = new Set();
+		const elementObservervedAttributes = elementClass.observedAttributes;
+
+		if (Array.isArray(elementObservervedAttributes)) {
+			for (const attribute of elementObservervedAttributes) {
+				observedAttributes.add(String(attribute).toLowerCase());
+			}
+		}
+
+		this[PropertySymbol.registry].set(name, {
 			elementClass,
-			extends: options && options.extends ? options.extends.toLowerCase() : null
-		};
+			extends: options && options.extends ? options.extends.toLowerCase() : null,
+			observedAttributes,
+			livecycleCallbacks: {
+				connectedCallback: elementClass.prototype.connectedCallback,
+				disconnectedCallback: elementClass.prototype.disconnectedCallback,
+				attributeChangedCallback: elementClass.prototype.attributeChangedCallback
+			}
+		});
 		this[PropertySymbol.classRegistry].set(elementClass, name);
 
-		// ObservedAttributes should only be called once by CustomElementRegistry (see #117)
-		elementClass[PropertySymbol.observedAttributes] = (elementClass.observedAttributes || []).map(
-			(name) => String(name).toLowerCase()
-		);
-
 		const callbacks = this[PropertySymbol.callbacks].get(name);
 		if (callbacks) {
 			this[PropertySymbol.callbacks].delete(name);
@@ -98,7 +110,7 @@ export default class CustomElementRegistry {
 	 * @returns HTMLElement Class defined or undefined.
 	 */
 	public get(name: string): typeof HTMLElement | undefined {
-		return this[PropertySymbol.registry][name]?.elementClass;
+		return this[PropertySymbol.registry].get(name)?.elementClass;
 	}
 
 	/**
@@ -125,7 +137,7 @@ export default class CustomElementRegistry {
 				)
 			);
 		}
-		if (!this.#isValidCustomElementName(name)) {
+		if (!CustomElementUtility.isValidCustomElementName(name)) {
 			return Promise.reject(
 				new this.#window.DOMException(
 					`Failed to execute 'whenDefined' on 'CustomElementRegistry': Invalid custom element name: "${name}"`
@@ -160,46 +172,15 @@ export default class CustomElementRegistry {
 	 */
 	public [PropertySymbol.destroy](): void {
 		this[PropertySymbol.destroyed] = true;
-		for (const entity of Object.values(this[PropertySymbol.registry])) {
-			entity.elementClass.prototype[PropertySymbol.window] = null;
-			entity.elementClass.prototype[PropertySymbol.ownerDocument] = null;
-			entity.elementClass.prototype[PropertySymbol.tagName] = null;
-			entity.elementClass.prototype[PropertySymbol.localName] = null;
-			entity.elementClass.prototype[PropertySymbol.namespaceURI] = null;
+		for (const definition of this[PropertySymbol.registry].values()) {
+			definition.elementClass.prototype[PropertySymbol.window] = null;
+			definition.elementClass.prototype[PropertySymbol.ownerDocument] = null;
+			definition.elementClass.prototype[PropertySymbol.tagName] = null;
+			definition.elementClass.prototype[PropertySymbol.localName] = null;
+			definition.elementClass.prototype[PropertySymbol.namespaceURI] = null;
 		}
-		this[PropertySymbol.registry] = {};
+		this[PropertySymbol.registry] = new Map();
 		this[PropertySymbol.classRegistry] = new Map();
 		this[PropertySymbol.callbacks] = new Map();
 	}
-
-	/**
-	 * Validates the correctness of custom element tag names.
-	 *
-	 * @param name Custom element tag name.
-	 * @returns True, if tag name is standard compliant.
-	 */
-	#isValidCustomElementName(name: string): boolean {
-		// Validation criteria based on:
-		// https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name
-		const PCENChar =
-			'[-_.]|[0-9]|[a-z]|\u{B7}|[\u{C0}-\u{D6}]|[\u{D8}-\u{F6}]' +
-			'|[\u{F8}-\u{37D}]|[\u{37F}-\u{1FFF}]' +
-			'|[\u{200C}-\u{200D}]|[\u{203F}-\u{2040}]|[\u{2070}-\u{218F}]' +
-			'|[\u{2C00}-\u{2FEF}]|[\u{3001}-\u{D7FF}]' +
-			'|[\u{F900}-\u{FDCF}]|[\u{FDF0}-\u{FFFD}]|[\u{10000}-\u{EFFFF}]';
-
-		const PCEN = new RegExp(`^[a-z](${PCENChar})*-(${PCENChar})*$`, 'u');
-
-		const reservedNames = [
-			'annotation-xml',
-			'color-profile',
-			'font-face',
-			'font-face-src',
-			'font-face-uri',
-			'font-face-format',
-			'font-face-name',
-			'missing-glyph'
-		];
-		return PCEN.test(name) && !reservedNames.includes(name);
-	}
 }
diff --git a/packages/happy-dom/src/custom-element/CustomElementUtility.ts b/packages/happy-dom/src/custom-element/CustomElementUtility.ts
new file mode 100644
index 000000000..a24df9175
--- /dev/null
+++ b/packages/happy-dom/src/custom-element/CustomElementUtility.ts
@@ -0,0 +1,34 @@
+const PCEN_CHAR =
+	'[-_.]|[0-9]|[a-z]|\u{B7}|[\u{C0}-\u{D6}]|[\u{D8}-\u{F6}]' +
+	'|[\u{F8}-\u{37D}]|[\u{37F}-\u{1FFF}]' +
+	'|[\u{200C}-\u{200D}]|[\u{203F}-\u{2040}]|[\u{2070}-\u{218F}]' +
+	'|[\u{2C00}-\u{2FEF}]|[\u{3001}-\u{D7FF}]' +
+	'|[\u{F900}-\u{FDCF}]|[\u{FDF0}-\u{FFFD}]|[\u{10000}-\u{EFFFF}]';
+
+const PCEN_REGEXP = new RegExp(`^[a-z](${PCEN_CHAR})*-(${PCEN_CHAR})*$`, 'u');
+const RESERVED_NAMES = [
+	'annotation-xml',
+	'color-profile',
+	'font-face',
+	'font-face-src',
+	'font-face-uri',
+	'font-face-format',
+	'font-face-name',
+	'missing-glyph'
+];
+
+/**
+ * Custom element utility.
+ */
+export default class CustomElementUtility {
+	/**
+	 * Returns true if the tag name is a valid custom element name.
+	 *
+	 * @see https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name
+	 * @param name Tag name.
+	 * @returns True if valid.
+	 */
+	public static isValidCustomElementName(name: string): boolean {
+		return PCEN_REGEXP.test(name) && !RESERVED_NAMES.includes(name);
+	}
+}
diff --git a/packages/happy-dom/src/custom-element/ICustomElementDefinition.ts b/packages/happy-dom/src/custom-element/ICustomElementDefinition.ts
new file mode 100644
index 000000000..e1b91f600
--- /dev/null
+++ b/packages/happy-dom/src/custom-element/ICustomElementDefinition.ts
@@ -0,0 +1,16 @@
+import HTMLElement from '../nodes/html-element/HTMLElement.js';
+
+export default interface ICustomElementDefinition {
+	elementClass: typeof HTMLElement;
+	extends: string;
+	observedAttributes: Set<string>;
+	livecycleCallbacks: {
+		connectedCallback: () => void;
+		disconnectedCallback: () => void;
+		attributeChangedCallback: (
+			name: string,
+			oldValue: string | null,
+			newValue: string | null
+		) => void;
+	};
+}
diff --git a/packages/happy-dom/src/dom-parser/DOMParser.ts b/packages/happy-dom/src/dom-parser/DOMParser.ts
index 0412ef083..da6cd6c59 100644
--- a/packages/happy-dom/src/dom-parser/DOMParser.ts
+++ b/packages/happy-dom/src/dom-parser/DOMParser.ts
@@ -1,9 +1,8 @@
 import Document from '../nodes/document/Document.js';
 import * as PropertySymbol from '../PropertySymbol.js';
 import XMLParser from '../xml-parser/XMLParser.js';
-import DocumentFragment from '../nodes/document-fragment/DocumentFragment.js';
 import BrowserWindow from '../window/BrowserWindow.js';
-import NodeTypeEnum from '../nodes/node/NodeTypeEnum.js';
+import HTMLParser from '../html-parser/HTMLParser.js';
 
 /**
  * DOM parser.
@@ -29,87 +28,18 @@ export default class DOMParser {
 			);
 		}
 
-		const newDocument = <Document>this.#createDocument(mimeType);
-		const documentChildNodes = newDocument[PropertySymbol.nodeArray];
-
-		while (documentChildNodes.length) {
-			newDocument.removeChild(documentChildNodes[0]);
-		}
-
-		const root = <DocumentFragment>XMLParser.parse(newDocument, string, { evaluateScripts: true });
-		let documentElement = null;
-		let documentTypeNode = null;
-
-		for (const node of root[PropertySymbol.nodeArray]) {
-			if (node['tagName'] === 'HTML') {
-				documentElement = node;
-			} else if (node[PropertySymbol.nodeType] === NodeTypeEnum.documentTypeNode) {
-				documentTypeNode = node;
-			}
-
-			if (documentElement && documentTypeNode) {
-				break;
-			}
-		}
-
-		if (documentElement) {
-			if (documentTypeNode) {
-				newDocument.appendChild(documentTypeNode);
-			}
-			newDocument.appendChild(documentElement);
-			const body = newDocument.body;
-			if (body) {
-				while (root[PropertySymbol.nodeArray].length) {
-					body.appendChild(root[PropertySymbol.nodeArray][0]);
-				}
-			}
-		} else {
-			switch (mimeType) {
-				case 'image/svg+xml':
-					{
-						while (root[PropertySymbol.nodeArray].length) {
-							newDocument.appendChild(root[PropertySymbol.nodeArray][0]);
-						}
-					}
-					break;
-				case 'text/html':
-				default:
-					{
-						const documentElement = newDocument.createElement('html');
-						const bodyElement = newDocument.createElement('body');
-						const headElement = newDocument.createElement('head');
-
-						documentElement.appendChild(headElement);
-						documentElement.appendChild(bodyElement);
-						newDocument.appendChild(documentElement);
-
-						while (root[PropertySymbol.nodeArray].length) {
-							bodyElement.appendChild(root[PropertySymbol.nodeArray][0]);
-						}
-					}
-					break;
-			}
-		}
-
-		return newDocument;
-	}
-
-	/**
-	 *
-	 * @param mimeType Mime type.
-	 * @returns Document.
-	 */
-	#createDocument(mimeType: string): Document {
 		const window = this[PropertySymbol.window];
 
 		switch (mimeType) {
 			case 'text/html':
-				return new window.HTMLDocument();
+				const newDocument = new window.HTMLDocument();
+				newDocument[PropertySymbol.defaultView] = window;
+				return <Document>new HTMLParser(this[PropertySymbol.window]).parse(string, newDocument);
 			case 'image/svg+xml':
 			case 'text/xml':
 			case 'application/xml':
 			case 'application/xhtml+xml':
-				return new window.XMLDocument();
+				return <Document>new XMLParser(this[PropertySymbol.window]).parse(string);
 			default:
 				throw new window.DOMException(`Unknown mime type "${mimeType}".`);
 		}
diff --git a/packages/happy-dom/src/dom/DOMStringMap.ts b/packages/happy-dom/src/dom/DOMStringMap.ts
index 0790b3f8d..512431bcf 100644
--- a/packages/happy-dom/src/dom/DOMStringMap.ts
+++ b/packages/happy-dom/src/dom/DOMStringMap.ts
@@ -26,11 +26,11 @@ export default class DOMStringMap {
 		// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy
 		return new Proxy(this, {
 			get(_target, property: string): string {
-				const attribute = element[PropertySymbol.attributes][PropertySymbol.namedItems].get(
+				const attribute = element.getAttribute(
 					'data-' + DOMStringMapUtility.camelCaseToKebab(property)
 				);
 				if (attribute) {
-					return attribute[PropertySymbol.value];
+					return attribute;
 				}
 			},
 			set(_target, property: string, value: string): boolean {
@@ -46,19 +46,21 @@ export default class DOMStringMap {
 				// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/ownKeys
 				// "The result List must contain the keys of all non-configurable own properties of the target object."
 				const keys = [];
-				for (const item of element[PropertySymbol.attributes][PropertySymbol.namedItems].values()) {
-					if (item[PropertySymbol.name].startsWith('data-')) {
+				for (const items of element[PropertySymbol.attributes][
+					PropertySymbol.namedItems
+				].values()) {
+					if (items[0][PropertySymbol.name].startsWith('data-')) {
 						keys.push(
-							DOMStringMapUtility.kebabToCamelCase(item[PropertySymbol.name].replace('data-', ''))
+							DOMStringMapUtility.kebabToCamelCase(
+								items[0][PropertySymbol.name].replace('data-', '')
+							)
 						);
 					}
 				}
 				return keys;
 			},
 			has(_target, property: string): boolean {
-				return element[PropertySymbol.attributes][PropertySymbol.namedItems].has(
-					'data-' + DOMStringMapUtility.camelCaseToKebab(property)
-				);
+				return element.hasAttribute('data-' + DOMStringMapUtility.camelCaseToKebab(property));
 			},
 			defineProperty(_target, property: string, descriptor): boolean {
 				if (descriptor.value === undefined) {
@@ -73,14 +75,14 @@ export default class DOMStringMap {
 				return true;
 			},
 			getOwnPropertyDescriptor(_target, property: string): PropertyDescriptor {
-				const attribute = element[PropertySymbol.attributes][PropertySymbol.namedItems].get(
+				const attribute = element.getAttribute(
 					'data-' + DOMStringMapUtility.camelCaseToKebab(property)
 				);
 				if (!attribute) {
 					return;
 				}
 				return {
-					value: attribute[PropertySymbol.value],
+					value: attribute,
 					writable: true,
 					enumerable: true,
 					configurable: true
diff --git a/packages/happy-dom/src/dom/DOMTokenList.ts b/packages/happy-dom/src/dom/DOMTokenList.ts
index 9d3a15513..12ff8add7 100644
--- a/packages/happy-dom/src/dom/DOMTokenList.ts
+++ b/packages/happy-dom/src/dom/DOMTokenList.ts
@@ -1,4 +1,4 @@
-import ClassMethodBinder from '../ClassMethodBinder.js';
+import ClassMethodBinder from '../utilities/ClassMethodBinder.js';
 import Element from '../nodes/element/Element.js';
 import * as PropertySymbol from '../PropertySymbol.js';
 
diff --git a/packages/happy-dom/src/exception/DOMExceptionNameEnum.ts b/packages/happy-dom/src/exception/DOMExceptionNameEnum.ts
index 9f88ec213..b8bf0fdcb 100644
--- a/packages/happy-dom/src/exception/DOMExceptionNameEnum.ts
+++ b/packages/happy-dom/src/exception/DOMExceptionNameEnum.ts
@@ -16,6 +16,7 @@ enum DOMExceptionNameEnum {
 	abortError = 'AbortError',
 	timeoutError = 'TimeoutError',
 	encodingError = 'EncodingError',
-	uriMismatchError = 'URIMismatchError'
+	uriMismatchError = 'URIMismatchError',
+	inUseAttributeError = 'InUseAttributeError'
 }
 export default DOMExceptionNameEnum;
diff --git a/packages/happy-dom/src/history/History.ts b/packages/happy-dom/src/history/History.ts
index 18be9e7e6..a4de15ec0 100644
--- a/packages/happy-dom/src/history/History.ts
+++ b/packages/happy-dom/src/history/History.ts
@@ -47,7 +47,7 @@ export default class History {
 	 * @returns History length.
 	 */
 	public get length(): number {
-		return this.#browserFrame[PropertySymbol.history].length;
+		return this.#browserFrame?.[PropertySymbol.history].length || 0;
 	}
 
 	/**
@@ -87,7 +87,7 @@ export default class History {
 	 */
 	public back(): void {
 		if (!this.#window.closed) {
-			this.#browserFrame.goBack();
+			this.#browserFrame?.goBack();
 		}
 	}
 
@@ -96,7 +96,7 @@ export default class History {
 	 */
 	public forward(): void {
 		if (!this.#window.closed) {
-			this.#browserFrame.goForward();
+			this.#browserFrame?.goForward();
 		}
 	}
 
@@ -108,7 +108,7 @@ export default class History {
 	 */
 	public go(delta: number): void {
 		if (!this.#window.closed) {
-			this.#browserFrame.goSteps(delta);
+			this.#browserFrame?.goSteps(delta);
 		}
 	}
 
@@ -124,7 +124,7 @@ export default class History {
 			return;
 		}
 
-		const history = this.#browserFrame[PropertySymbol.history];
+		const history = this.#browserFrame?.[PropertySymbol.history];
 
 		if (!history) {
 			return;
@@ -182,7 +182,7 @@ export default class History {
 			return;
 		}
 
-		const history = this.#browserFrame[PropertySymbol.history];
+		const history = this.#browserFrame?.[PropertySymbol.history];
 
 		if (!history) {
 			return;
diff --git a/packages/happy-dom/src/html-parser/HTMLParser.ts b/packages/happy-dom/src/html-parser/HTMLParser.ts
new file mode 100755
index 000000000..36f109579
--- /dev/null
+++ b/packages/happy-dom/src/html-parser/HTMLParser.ts
@@ -0,0 +1,864 @@
+import Document from '../nodes/document/Document.js';
+import * as PropertySymbol from '../PropertySymbol.js';
+import NamespaceURI from '../config/NamespaceURI.js';
+import HTMLScriptElement from '../nodes/html-script-element/HTMLScriptElement.js';
+import Element from '../nodes/element/Element.js';
+import HTMLLinkElement from '../nodes/html-link-element/HTMLLinkElement.js';
+import Node from '../nodes/node/Node.js';
+import DocumentFragment from '../nodes/document-fragment/DocumentFragment.js';
+import HTMLElementConfig from '../config/HTMLElementConfig.js';
+import HTMLElementConfigContentModelEnum from '../config/HTMLElementConfigContentModelEnum.js';
+import SVGElementConfig from '../config/SVGElementConfig.js';
+import StringUtility from '../utilities/StringUtility.js';
+import BrowserWindow from '../window/BrowserWindow.js';
+import DocumentType from '../nodes/document-type/DocumentType.js';
+import HTMLHeadElement from '../nodes/html-head-element/HTMLHeadElement.js';
+import HTMLBodyElement from '../nodes/html-body-element/HTMLBodyElement.js';
+import HTMLHtmlElement from '../nodes/html-html-element/HTMLHtmlElement.js';
+import XMLEncodeUtility from '../utilities/XMLEncodeUtility.js';
+import NodeTypeEnum from '../nodes/node/NodeTypeEnum.js';
+
+/**
+ * Markup RegExp.
+ *
+ * Group 1: Beginning of start tag (e.g. "div" in "<div").
+ * Group 2: End tag (e.g. "div" in "</div>").
+ * Group 3: Comment start tag "<!--"
+ * Group 4: Comment end tag "-->"
+ * Group 5: Document type start tag "<!"
+ * Group 6: Processing instruction start tag "<?"
+ * Group 7: End of self closing start tag (e.g. "/>" in "<img/>").
+ * Group 8: End of start tag or comment tag (e.g. ">" in "<div>").
+ */
+const MARKUP_REGEXP = /<([^\s/!>?]+)|<\/([^\s/!>?]+)\s*>|(<!--)|(-->|--!>)|(<!)|(<\?)|(\/>)|(>)/gm;
+
+/**
+ * Attribute RegExp.
+ *
+ * Group 1: Attribute name when the attribute has a value with no apostrophes (e.g. "name" in "<div name=value>").
+ * Group 2: Attribute value when the attribute has a value with no apostrophes (e.g. "value" in "<div name="value">").
+ * Group 3: Attribute name when the attribute has a value using double apostrophe (e.g. "name" in "<div name="value">").
+ * Group 4: Attribute value when the attribute has a value using double apostrophe (e.g. "value" in "<div name="value">").
+ * Group 5: Attribute end apostrophe when the attribute has a value using double apostrophe (e.g. '"' in "<div name="value">").
+ * Group 6: Attribute name when the attribute has a value using single apostrophe (e.g. "name" in "<div name='value'>").
+ * Group 7: Attribute value when the attribute has a value using single apostrophe (e.g. "value" in "<div name='value'>").
+ * Group 8: Attribute end apostrophe when the attribute has a value using single apostrophe (e.g. "'" in "<div name='value'>").
+ * Group 9: Attribute name when the attribute has no value (e.g. "disabled" in "<div disabled>").
+ */
+const ATTRIBUTE_REGEXP =
+	/\s*([a-zA-Z0-9-_:.$@?\\<\[\]]+)\s*=\s*([a-zA-Z0-9-_:.$@?{}/<]+)|\s*([a-zA-Z0-9-_:.$@?\\<\[\]]+)\s*=\s*"([^"]*)("{0,1})|\s*([a-zA-Z0-9-_:.$@?\\<\[\]]+)\s*=\s*'([^']*)('{0,1})|\s*([a-zA-Z0-9-_:.$@?\\<\[\]]+)/gm;
+
+/**
+ * Document type attribute RegExp.
+ *
+ * Group 1: Attribute value.
+ */
+const DOCUMENT_TYPE_ATTRIBUTE_REGEXP = /"([^"]+)"/gm;
+
+/**
+ * Space RegExp.
+ */
+const SPACE_REGEXP = /\s+/;
+
+/**
+ * Space in the beginning of string RegExp.
+ */
+const SPACE_IN_BEGINNING_REGEXP = /^\s+/;
+
+/**
+ * Markup read state (which state the parser is in).
+ */
+enum MarkupReadStateEnum {
+	any = 'any',
+	startTag = 'startTag',
+	comment = 'comment',
+	documentType = 'documentType',
+	processingInstruction = 'processingInstruction',
+	rawTextElement = 'rawTextElement'
+}
+
+/**
+ * Document type.
+ */
+interface IDocumentType {
+	name: string;
+	publicId: string;
+	systemId: string;
+}
+
+/**
+ * How much of the HTML document that has been parsed (where the parser level is).
+ */
+enum HTMLDocumentStructureLevelEnum {
+	root = 0,
+	doctype = 1,
+	documentElement = 2,
+	head = 3,
+	additionalHeadWithoutBody = 4,
+	body = 5,
+	afterBody = 6
+}
+
+interface IHTMLDocumentStructure {
+	nodes: {
+		doctype: DocumentType;
+		documentElement: HTMLHtmlElement;
+		head: HTMLHeadElement;
+		body: HTMLBodyElement;
+	};
+	level: HTMLDocumentStructureLevelEnum;
+}
+
+/**
+ * HTML parser.
+ */
+export default class HTMLParser {
+	private window: BrowserWindow;
+	private evaluateScripts: boolean = false;
+	private rootNode: Element | DocumentFragment | Document | null = null;
+	private rootDocument: Document | null = null;
+	private nodeStack: Node[] = [];
+	private tagNameStack: string[] = [];
+	private documentStructure: IHTMLDocumentStructure | null = null;
+	private startTagIndex = 0;
+	private markupRegExp: RegExp | null = null;
+	private nextElement: Element | null = null;
+	private currentNode: Node | null = null;
+	private readState: MarkupReadStateEnum = MarkupReadStateEnum.any;
+
+	/**
+	 * Constructor.
+	 *
+	 * @param window Window.
+	 * @param [options] Options.
+	 * @param [options.evaluateScripts] Set to "true" to enable script execution
+	 */
+	constructor(
+		window: BrowserWindow,
+		options?: {
+			evaluateScripts?: boolean;
+		}
+	) {
+		this.window = window;
+
+		if (options?.evaluateScripts) {
+			this.evaluateScripts = true;
+		}
+	}
+	/**
+	 * Parses HTML a root element containing nodes found.
+	 *
+	 * @param html HTML string.
+	 * @param [rootNode] Root node.
+	 * @returns Root node.
+	 */
+	public parse(
+		html: string,
+		rootNode?: Element | DocumentFragment | Document
+	): Element | DocumentFragment | Document {
+		this.rootNode = rootNode || this.window.document.createDocumentFragment();
+		this.rootDocument = this.rootNode instanceof Document ? this.rootNode : this.window.document;
+		this.nodeStack = [this.rootNode];
+		this.tagNameStack = [null];
+		this.currentNode = this.rootNode;
+		this.readState = <MarkupReadStateEnum>MarkupReadStateEnum.any;
+		this.documentStructure = null;
+		this.startTagIndex = 0;
+		this.markupRegExp = new RegExp(MARKUP_REGEXP, 'gm');
+
+		if (this.rootNode instanceof Document) {
+			const { doctype, documentElement, head, body } = <Document>this.rootNode;
+
+			if (!documentElement || !head || !body) {
+				throw new Error(
+					'Failed to parse HTML: The root node must have "documentElement", "head" and "body".\n\nWe should not end up here and it is therefore a bug in Happy DOM. Please report this issue.'
+				);
+			}
+
+			this.documentStructure = {
+				nodes: {
+					doctype: doctype || null,
+					documentElement,
+					head,
+					body
+				},
+				level: HTMLDocumentStructureLevelEnum.root
+			};
+		}
+
+		let match: RegExpExecArray;
+		let lastIndex = 0;
+
+		html = String(html);
+
+		while ((match = this.markupRegExp.exec(html))) {
+			switch (this.readState) {
+				case MarkupReadStateEnum.any:
+					// Plain text between tags.
+					if (
+						match.index !== lastIndex &&
+						(match[1] || match[2] || match[3] || match[4] || match[5] !== undefined || match[6])
+					) {
+						this.parsePlainText(html.substring(lastIndex, match.index));
+					}
+
+					if (match[1]) {
+						// Start tag.
+						this.nextElement = this.getStartTagElement(match[1]);
+
+						this.startTagIndex = this.markupRegExp.lastIndex;
+						this.readState = MarkupReadStateEnum.startTag;
+					} else if (match[2]) {
+						// End tag.
+						this.parseEndTag(match[2]);
+					} else if (match[3]) {
+						// Comment.
+						this.startTagIndex = this.markupRegExp.lastIndex;
+						this.readState = MarkupReadStateEnum.comment;
+					} else if (match[5] !== undefined) {
+						// Document type.
+						this.startTagIndex = this.markupRegExp.lastIndex;
+						this.readState = MarkupReadStateEnum.documentType;
+					} else if (match[6]) {
+						// Processing instruction.
+						this.startTagIndex = this.markupRegExp.lastIndex;
+						this.readState = MarkupReadStateEnum.processingInstruction;
+					} else {
+						// Plain text between tags, including the matched tag as it is not a valid start or end tag.
+						this.parsePlainText(html.substring(lastIndex, this.markupRegExp.lastIndex));
+					}
+
+					break;
+				case MarkupReadStateEnum.startTag:
+					// End of start tag
+
+					// match[2] is matching an end tag in case the start tag wasn't closed (e.g. "<div\n</ul>" instead of "<div>\n</ul>").
+					// match[7] is matching "/>" (e.g. "<img/>").
+					// match[8] is matching ">" (e.g. "<div>").
+					if (match[7] || match[8] || match[2]) {
+						if (this.nextElement) {
+							const attributeString = html.substring(
+								this.startTagIndex,
+								match[2] ? this.markupRegExp.lastIndex - 1 : match.index
+							);
+							const isSelfClosed = !!match[7];
+
+							this.parseEndOfStartTag(attributeString, isSelfClosed);
+						} else {
+							// If "nextElement" is set to null, the tag is not allowed (<html>, <head> and <body> are not allowed in an HTML fragment or to be nested).
+							this.readState = MarkupReadStateEnum.any;
+						}
+					}
+					break;
+				case MarkupReadStateEnum.comment:
+					// Comment end tag.
+
+					if (match[4]) {
+						this.parseComment(html.substring(this.startTagIndex, match.index));
+					}
+					break;
+				case MarkupReadStateEnum.documentType:
+					// Document type end tag.
+
+					if (match[7] || match[8]) {
+						this.parseDocumentType(html.substring(this.startTagIndex, match.index));
+					}
+					break;
+				case MarkupReadStateEnum.processingInstruction:
+					// Processing instruction end tag.
+
+					if (match[7] || match[8]) {
+						// Processing instructions are not supported in HTML and are rendered as comments.
+						this.parseComment('?' + html.substring(this.startTagIndex, match.index));
+					}
+					break;
+				case MarkupReadStateEnum.rawTextElement:
+					// End tag of raw text content.
+
+					// <script> and <style> elements are raw text elements.
+
+					if (match[2]) {
+						this.parseRawTextElementContent(
+							match[2],
+							html.substring(this.startTagIndex, match.index)
+						);
+					}
+					break;
+			}
+
+			lastIndex = this.markupRegExp.lastIndex;
+		}
+
+		// Plain text after tags.
+
+		if (lastIndex !== html.length && this.currentNode) {
+			this.parsePlainText(html.substring(lastIndex));
+		}
+
+		return this.rootNode;
+	}
+
+	/**
+	 * Parses plain text.
+	 *
+	 * @param text Text.
+	 */
+	private parsePlainText(text: string): void {
+		if (this.documentStructure) {
+			const level = this.documentStructure.level;
+			const { documentElement, head, body } = this.documentStructure.nodes;
+
+			// We should remove space in beginning inside the document and the <html> tag.
+			const htmlText =
+				(this.currentNode === this.rootNode || this.currentNode === documentElement) &&
+				level < HTMLDocumentStructureLevelEnum.head &&
+				body[PropertySymbol.elementArray].length === 0
+					? text.replace(SPACE_IN_BEGINNING_REGEXP, '')
+					: text;
+
+			if (htmlText) {
+				const textNode = this.rootDocument.createTextNode(
+					XMLEncodeUtility.decodeHTMLEntities(htmlText)
+				);
+				if (
+					this.currentNode === head &&
+					level === HTMLDocumentStructureLevelEnum.additionalHeadWithoutBody
+				) {
+					documentElement[PropertySymbol.insertBefore](textNode, body, true);
+				} else if (
+					this.currentNode === this.rootNode ||
+					this.currentNode === documentElement ||
+					(this.currentNode === head && level >= HTMLDocumentStructureLevelEnum.body)
+				) {
+					if (level === HTMLDocumentStructureLevelEnum.head) {
+						// Space between <head> and <body> is allowed
+						documentElement[PropertySymbol.insertBefore](textNode, body, true);
+					} else if (body.lastChild?.[PropertySymbol.nodeType] === NodeTypeEnum.textNode) {
+						// If the last child of the body is a text node, we should append the text to it.
+						body.lastChild[PropertySymbol.data] += text;
+					} else {
+						// Nodes outside <html>, <head> and <body> should be appended to the body
+						body[PropertySymbol.appendChild](textNode, true);
+					}
+				} else {
+					this.currentNode[PropertySymbol.appendChild](textNode, true);
+				}
+			}
+		} else {
+			const textNode = this.rootDocument.createTextNode(XMLEncodeUtility.decodeHTMLEntities(text));
+			this.currentNode[PropertySymbol.appendChild](textNode, true);
+		}
+	}
+
+	/**
+	 * Parses end of start tag.
+	 *
+	 * @param attributeString Attribute string.
+	 * @param isSelfClosed Is self closed.
+	 */
+	private parseEndOfStartTag(attributeString: string, isSelfClosed: boolean): void {
+		if (
+			attributeString &&
+			(!this.documentStructure ||
+				this.nextElement !== this.documentStructure.nodes.head ||
+				this.documentStructure.level < HTMLDocumentStructureLevelEnum.body)
+		) {
+			const attributeRegexp = new RegExp(ATTRIBUTE_REGEXP, 'gm');
+			let attributeMatch: RegExpExecArray;
+
+			while ((attributeMatch = attributeRegexp.exec(attributeString))) {
+				if (
+					(attributeMatch[1] && attributeMatch[2]) ||
+					(attributeMatch[3] && attributeMatch[5] === '"') ||
+					(attributeMatch[6] && attributeMatch[8] === "'") ||
+					attributeMatch[9]
+				) {
+					// Valid attribute name and value.
+					const name =
+						attributeMatch[1] || attributeMatch[3] || attributeMatch[6] || attributeMatch[9] || '';
+					const rawValue = attributeMatch[2] || attributeMatch[4] || attributeMatch[7] || '';
+					const value = rawValue ? XMLEncodeUtility.decodeAttributeValue(rawValue) : '';
+					const attributes = this.nextElement[PropertySymbol.attributes];
+
+					if (this.nextElement[PropertySymbol.namespaceURI] === NamespaceURI.svg) {
+						// In the SVG namespace, the attribute "xmlns" should be set to the "http://www.w3.org/2000/xmlns/" namespace.
+						const namespaceURI = name === 'xmlns' ? NamespaceURI.xmlns : null;
+
+						if (!attributes.getNamedItemNS(namespaceURI, name)) {
+							const attributeItem = this.rootDocument.createAttributeNS(namespaceURI, name);
+							attributeItem[PropertySymbol.value] = value;
+							attributes[PropertySymbol.setNamedItem](attributeItem);
+						}
+					} else if (!attributes.getNamedItem(name)) {
+						const attributeItem = this.rootDocument.createAttribute(name);
+						attributeItem[PropertySymbol.value] = value;
+						attributes[PropertySymbol.setNamedItem](attributeItem);
+					}
+
+					this.startTagIndex += attributeMatch[0].length;
+				} else if (
+					!attributeMatch[1] &&
+					((attributeMatch[3] && !attributeMatch[5]) || (attributeMatch[6] && !attributeMatch[8]))
+				) {
+					// End attribute apostrophe is missing (e.g. "attr='value" or 'attr="value').
+					// We should continue to the next end of start tag match.
+					return;
+				}
+			}
+		}
+
+		const tagName = this.nextElement[PropertySymbol.tagName];
+		const lowerTagName = tagName.toLowerCase();
+		const config = HTMLElementConfig[lowerTagName];
+		let previousCurrentNode: Node | null = null;
+
+		while (previousCurrentNode !== this.rootNode) {
+			const parentLowerTagName = this.currentNode[PropertySymbol.tagName]?.toLowerCase();
+			const parentConfig = HTMLElementConfig[parentLowerTagName];
+
+			if (previousCurrentNode === this.currentNode) {
+				throw new Error(
+					'Failed to parse HTML: The parser is stuck in an infinite loop. Please report this issue.'
+				);
+			}
+
+			previousCurrentNode = this.currentNode;
+
+			// Some elements are not allowed to be nested (e.g. "<a><a></a></a>" is not allowed.).
+			// Therefore we need to auto-close tags with the same name matching the config, so that it become valid (e.g. "<a></a><a></a>").
+			if (
+				(config?.contentModel === HTMLElementConfigContentModelEnum.noFirstLevelSelfDescendants &&
+					this.tagNameStack[this.tagNameStack.length - 1] === tagName) ||
+				parentConfig?.contentModel === HTMLElementConfigContentModelEnum.textOrComments ||
+				(parentConfig?.contentModel ===
+					HTMLElementConfigContentModelEnum.noForbiddenFirstLevelDescendants &&
+					parentConfig?.forbiddenDescendants?.includes(lowerTagName)) ||
+				(parentConfig?.contentModel === HTMLElementConfigContentModelEnum.permittedDescendants &&
+					!parentConfig?.permittedDescendants?.includes(lowerTagName) &&
+					(!config ||
+						!config.addPermittedParent ||
+						(HTMLElementConfig[config.addPermittedParent].permittedParents &&
+							!HTMLElementConfig[config.addPermittedParent].permittedParents.includes(
+								parentLowerTagName
+							)) ||
+						(HTMLElementConfig[config.addPermittedParent].permittedDescendants &&
+							!HTMLElementConfig[config.addPermittedParent].permittedDescendants.includes(
+								lowerTagName
+							))))
+			) {
+				// We need to move forbidden elements inside <table> outside of the table if possible.
+				// E.g. "<table><div><tr><td></td></tr></div></table>"" should become "<div></div><table><tbody><tr><td></td></tr></tbody></table>" (<tbody> is added as <tr> has addPermittedParent as config).
+				if (
+					parentConfig?.contentModel === HTMLElementConfigContentModelEnum.permittedDescendants &&
+					parentConfig.moveForbiddenDescendant &&
+					!parentConfig.moveForbiddenDescendant.exclude.includes(lowerTagName)
+				) {
+					// We add the element before the first element that is not forbidden.
+					let before: Node | null = this.currentNode;
+					while (before) {
+						if (
+							!before.parentNode ||
+							!HTMLElementConfig[before.parentNode[PropertySymbol.localName]]
+								?.permittedDescendants ||
+							HTMLElementConfig[
+								before.parentNode[PropertySymbol.localName]
+							]?.permittedDescendants?.includes(lowerTagName)
+						) {
+							break;
+						} else {
+							before = before.parentNode;
+						}
+					}
+					if (before && before.parentNode) {
+						before.parentNode.insertBefore(this.nextElement, before);
+					} else {
+						// If there is no element that is not forbidden, we append the element
+						before.appendChild(this.nextElement);
+					}
+					this.startTagIndex = this.markupRegExp.lastIndex;
+					this.readState = MarkupReadStateEnum.any;
+					return;
+				}
+				// This will close the current node
+				// E.g. "<a><a></a></a>" will become "<a></a><a></a>"
+				this.nodeStack.pop();
+				this.tagNameStack.pop();
+				this.currentNode = this.nodeStack[this.nodeStack.length - 1] || this.rootNode;
+			} else if (
+				config?.contentModel === HTMLElementConfigContentModelEnum.noSelfDescendants &&
+				this.tagNameStack.includes(tagName)
+			) {
+				while (this.currentNode !== this.rootNode) {
+					if ((<Element>this.currentNode)[PropertySymbol.tagName] === tagName) {
+						this.nodeStack.pop();
+						this.tagNameStack.pop();
+						this.currentNode = this.nodeStack[this.nodeStack.length - 1] || this.rootNode;
+						break;
+					}
+					this.nodeStack.pop();
+					this.tagNameStack.pop();
+					this.currentNode = this.nodeStack[this.nodeStack.length - 1] || this.rootNode;
+				}
+			} else if (
+				config?.permittedParents &&
+				!config.permittedParents.includes(parentLowerTagName)
+			) {
+				// <thead>, <tbody> and <tfoot> are only allowed as children of <table>.
+				// <tr> is only allowed as a child of <table>, <thead>, <tbody> and <tfoot>.
+				// <tbody> should be added automatically when <tr> is added directly to the table.
+				if (
+					!config.addPermittedParent ||
+					(HTMLElementConfig[config.addPermittedParent].permittedParents &&
+						!HTMLElementConfig[config.addPermittedParent].permittedParents.includes(
+							parentLowerTagName
+						)) ||
+					(HTMLElementConfig[config.addPermittedParent].permittedDescendants &&
+						!HTMLElementConfig[config.addPermittedParent].permittedDescendants.includes(
+							lowerTagName
+						))
+				) {
+					this.readState = MarkupReadStateEnum.any;
+					this.startTagIndex = this.markupRegExp.lastIndex;
+					return;
+				}
+
+				const permittedParent = this.rootDocument.createElement(config.addPermittedParent);
+
+				this.currentNode[PropertySymbol.appendChild](permittedParent, true);
+				this.nodeStack.push(permittedParent);
+				this.tagNameStack.push(permittedParent[PropertySymbol.tagName]);
+				this.currentNode = permittedParent;
+			} else {
+				break;
+			}
+		}
+
+		// Appends the new element to its parent
+		if (this.documentStructure) {
+			const { documentElement, head, body } = this.documentStructure.nodes;
+			const level = this.documentStructure.level;
+			// Appends the new node to its parent and sets is as current node.
+
+			// Raw text elements (e.g. <script>) should be appended after the raw text has been added as content to the element.
+			// <html>, <head> and <body> are special elements with context constraints. They are already available in the document.
+			if (
+				(!config || config.contentModel !== HTMLElementConfigContentModelEnum.rawText) &&
+				this.nextElement !== documentElement &&
+				this.nextElement !== head &&
+				this.nextElement !== body
+			) {
+				// When parser mode is "htmlDocument", any element added directly to the document or document element should be added to the body.
+				if (
+					documentElement &&
+					(this.currentNode === this.rootNode ||
+						this.currentNode === documentElement ||
+						(this.currentNode === head && level >= HTMLDocumentStructureLevelEnum.body))
+				) {
+					if (level < HTMLDocumentStructureLevelEnum.body) {
+						this.documentStructure.level = HTMLDocumentStructureLevelEnum.afterBody;
+					}
+					body[PropertySymbol.appendChild](this.nextElement, true);
+				} else {
+					this.currentNode[PropertySymbol.appendChild](this.nextElement, true);
+				}
+			}
+		} else {
+			this.currentNode[PropertySymbol.appendChild](this.nextElement, true);
+		}
+
+		// Sets the new element as the current node.
+
+		if (
+			!this.documentStructure ||
+			this.nextElement !== this.documentStructure.nodes.body ||
+			this.documentStructure.level <= HTMLDocumentStructureLevelEnum.body
+		) {
+			this.currentNode = this.nextElement;
+			this.nodeStack.push(this.currentNode);
+			this.tagNameStack.push(tagName);
+
+			if (this.documentStructure && this.nextElement === this.documentStructure.nodes.body) {
+				this.documentStructure.level = HTMLDocumentStructureLevelEnum.afterBody;
+			}
+
+			// Check if the tag is a void element and should be closed immediately.
+			// Elements in the SVG namespace can be self-closed (e.g. "/>").
+			// "/>" will be ignored in the HTML namespace.
+			if (
+				config?.contentModel === HTMLElementConfigContentModelEnum.noDescendants ||
+				(isSelfClosed &&
+					(<Element>this.currentNode)[PropertySymbol.namespaceURI] === NamespaceURI.svg)
+			) {
+				this.nodeStack.pop();
+				this.tagNameStack.pop();
+				this.currentNode = this.nodeStack[this.nodeStack.length - 1] || this.rootNode;
+				this.readState = MarkupReadStateEnum.any;
+			} else {
+				// We will set the read state to "rawText" for raw text elements such as <script> and <style> elements.
+				this.readState =
+					config?.contentModel === HTMLElementConfigContentModelEnum.rawText
+						? MarkupReadStateEnum.rawTextElement
+						: MarkupReadStateEnum.any;
+			}
+		} else {
+			this.readState = MarkupReadStateEnum.any;
+		}
+
+		this.startTagIndex = this.markupRegExp.lastIndex;
+	}
+
+	/**
+	 * Parses end tag.
+	 *
+	 * @param tagName Tag name.
+	 */
+	private parseEndTag(tagName: string): void {
+		// SVG elements are case-sensitive.
+		const name =
+			this.currentNode[PropertySymbol.namespaceURI] === NamespaceURI.html
+				? StringUtility.asciiUpperCase(tagName)
+				: SVGElementConfig[StringUtility.asciiLowerCase(tagName)]?.localName || tagName;
+		const index = this.tagNameStack.lastIndexOf(name);
+
+		// We close all tags up until the first tag that matches the end tag.
+		if (index !== -1) {
+			this.nodeStack.splice(index, this.nodeStack.length - index);
+			this.tagNameStack.splice(index, this.tagNameStack.length - index);
+			this.currentNode = this.nodeStack[this.nodeStack.length - 1] || this.rootNode;
+		}
+	}
+
+	/**
+	 * Parses comment.
+	 *
+	 * @param comment Comment.
+	 */
+	private parseComment(comment: string): void {
+		const commentNode = this.rootDocument.createComment(
+			XMLEncodeUtility.decodeHTMLEntities(comment)
+		);
+
+		if (this.documentStructure) {
+			const level = this.documentStructure.level;
+			const { documentElement, head, body } = this.documentStructure.nodes;
+
+			// We need to add the comment node to the correct position in the document.
+			let beforeNode: Node | null = null;
+			if (this.currentNode === this.rootNode && level === HTMLDocumentStructureLevelEnum.root) {
+				beforeNode = documentElement;
+			} else if (
+				this.currentNode === documentElement &&
+				level === HTMLDocumentStructureLevelEnum.documentElement
+			) {
+				beforeNode = head;
+			} else if (
+				this.currentNode === documentElement &&
+				level === HTMLDocumentStructureLevelEnum.head
+			) {
+				beforeNode = body;
+			}
+
+			this.currentNode[PropertySymbol.insertBefore](commentNode, beforeNode, true);
+		} else {
+			this.currentNode[PropertySymbol.appendChild](commentNode, true);
+		}
+
+		this.readState = MarkupReadStateEnum.any;
+	}
+
+	/**
+	 * Parses document type.
+	 *
+	 * @param text Text.
+	 */
+	private parseDocumentType(text: string): void {
+		const decodedText = XMLEncodeUtility.decodeHTMLEntities(text);
+
+		if (this.documentStructure) {
+			let { doctype } = this.documentStructure.nodes;
+			const documentType = this.getDocumentType(decodedText);
+			// Document type nodes are only allowed at the beginning of the document.
+			if (documentType) {
+				if (
+					this.currentNode === this.rootNode &&
+					this.documentStructure.level === HTMLDocumentStructureLevelEnum.root
+				) {
+					if (doctype) {
+						doctype[PropertySymbol.name] = documentType.name;
+						doctype[PropertySymbol.publicId] = documentType.publicId;
+						doctype[PropertySymbol.systemId] = documentType.systemId;
+					} else {
+						doctype = (<Document>this.rootNode).implementation.createDocumentType(
+							documentType.name,
+							documentType.publicId,
+							documentType.systemId
+						);
+						(<Document>this.rootNode).insertBefore(
+							doctype,
+							(<Document>this.rootNode).documentElement
+						);
+					}
+
+					this.documentStructure.level = HTMLDocumentStructureLevelEnum.doctype;
+				}
+			} else {
+				this.parseComment(decodedText);
+			}
+		} else {
+			// Document type nodes are only allowed at the beginning of the document.
+			if (!this.getDocumentType(decodedText)) {
+				this.parseComment(decodedText);
+			}
+		}
+
+		this.readState = MarkupReadStateEnum.any;
+	}
+
+	/**
+	 * Parses raw text content for elements such as <script> and <style>.
+	 *
+	 * @param tagName End tag name.
+	 * @param text Text.
+	 */
+	private parseRawTextElementContent(tagName: string, text: string): void {
+		const upperTagName = StringUtility.asciiUpperCase(tagName);
+
+		if (upperTagName !== this.currentNode[PropertySymbol.tagName]) {
+			return;
+		}
+
+		// Scripts are not allowed to be executed when they are parsed using innerHTML, outerHTML, replaceWith() etc.
+		// However, they are allowed to be executed when document.write() is used.
+		// See: https://developer.mozilla.org/en-US/docs/Web/API/HTMLScriptElement
+		if (upperTagName === 'SCRIPT') {
+			(<HTMLScriptElement>this.currentNode)[PropertySymbol.evaluateScript] = this.evaluateScripts;
+		} else if (upperTagName === 'LINK') {
+			// An assumption that the same rule should be applied for the HTMLLinkElement is made here.
+			(<HTMLLinkElement>this.currentNode)[PropertySymbol.evaluateCSS] = this.evaluateScripts;
+		}
+
+		// Plain text elements such as <script> and <style> should only contain text.
+		this.currentNode[PropertySymbol.appendChild](
+			this.rootDocument.createTextNode(XMLEncodeUtility.decodeHTMLEntities(text)),
+			true
+		);
+
+		const rawTextElement = this.currentNode;
+
+		this.nodeStack.pop();
+		this.tagNameStack.pop();
+		this.currentNode = this.nodeStack[this.nodeStack.length - 1] || this.rootNode;
+		this.readState = MarkupReadStateEnum.any;
+
+		// Appends the raw text element to its parent.
+
+		if (this.documentStructure) {
+			const { documentElement, body } = this.documentStructure.nodes;
+
+			// When parser mode is "htmlDocument", any element added directly to the document or document element should be added to the body.
+			if (
+				documentElement &&
+				(this.currentNode === this.rootNode || this.currentNode === documentElement)
+			) {
+				body[PropertySymbol.appendChild](rawTextElement, true);
+			} else {
+				this.currentNode[PropertySymbol.appendChild](rawTextElement, true);
+			}
+		} else {
+			this.currentNode[PropertySymbol.appendChild](rawTextElement, true);
+		}
+	}
+
+	/**
+	 * Creates an element or returns a reference to it.
+	 *
+	 * @param tagName Tag name.
+	 */
+	private getStartTagElement(tagName: string): Element {
+		const lowerTagName = StringUtility.asciiLowerCase(tagName);
+
+		// NamespaceURI is inherited from the parent element.
+		const namespaceURI = this.currentNode[PropertySymbol.namespaceURI];
+
+		// NamespaceURI should be SVG when the tag name is "svg" (even in XML mode).
+		if (lowerTagName === 'svg') {
+			return this.rootDocument.createElementNS(NamespaceURI.svg, 'svg');
+		}
+
+		if (namespaceURI === NamespaceURI.svg) {
+			return this.rootDocument.createElementNS(
+				NamespaceURI.svg,
+				SVGElementConfig[lowerTagName]?.localName || tagName
+			);
+		}
+
+		// New element.
+		switch (lowerTagName) {
+			case 'html':
+				if (!this.documentStructure) {
+					return null;
+				}
+				if (this.documentStructure.level < HTMLDocumentStructureLevelEnum.documentElement) {
+					this.documentStructure.level = HTMLDocumentStructureLevelEnum.documentElement;
+				}
+				return this.documentStructure.nodes.documentElement ?? null;
+			case 'head':
+				if (!this.documentStructure) {
+					return null;
+				}
+				if (this.documentStructure.level < HTMLDocumentStructureLevelEnum.head) {
+					this.documentStructure.level = HTMLDocumentStructureLevelEnum.head;
+				} else if (this.documentStructure.level === HTMLDocumentStructureLevelEnum.head) {
+					this.documentStructure.level = HTMLDocumentStructureLevelEnum.additionalHeadWithoutBody;
+				}
+				return this.documentStructure.nodes.head ?? null;
+			case 'body':
+				if (!this.documentStructure) {
+					return null;
+				}
+				if (this.documentStructure.level < HTMLDocumentStructureLevelEnum.body) {
+					this.documentStructure.level = HTMLDocumentStructureLevelEnum.body;
+				}
+				return this.documentStructure.nodes.body ?? null;
+			default:
+				return this.rootDocument.createElementNS(NamespaceURI.html, lowerTagName);
+		}
+	}
+
+	/**
+	 * Returns document type.
+	 *
+	 * @param value Value.
+	 * @returns Document type.
+	 */
+	private getDocumentType(value: string): IDocumentType {
+		if (!value.toUpperCase().startsWith('DOCTYPE')) {
+			return null;
+		}
+
+		const docTypeSplit = value.split(SPACE_REGEXP);
+
+		if (docTypeSplit.length <= 1) {
+			return null;
+		}
+
+		const docTypeString = docTypeSplit.slice(1).join(' ');
+		const attributes = [];
+		const attributeRegExp = new RegExp(DOCUMENT_TYPE_ATTRIBUTE_REGEXP, 'gm');
+		const isPublic = docTypeString.toUpperCase().includes('PUBLIC');
+		let attributeMatch;
+
+		while ((attributeMatch = attributeRegExp.exec(docTypeString))) {
+			attributes.push(attributeMatch[1]);
+		}
+
+		const publicId = isPublic ? attributes[0] || '' : '';
+		const systemId = isPublic ? attributes[1] || '' : attributes[0] || '';
+
+		return {
+			name: docTypeSplit[1].toLowerCase(),
+			publicId,
+			systemId
+		};
+	}
+}
diff --git a/packages/happy-dom/src/html-serializer/HTMLSerializer.ts b/packages/happy-dom/src/html-serializer/HTMLSerializer.ts
new file mode 100644
index 000000000..44b4f459f
--- /dev/null
+++ b/packages/happy-dom/src/html-serializer/HTMLSerializer.ts
@@ -0,0 +1,162 @@
+import Element from '../nodes/element/Element.js';
+import * as PropertySymbol from '../PropertySymbol.js';
+import Node from '../nodes/node/Node.js';
+import DocumentType from '../nodes/document-type/DocumentType.js';
+import HTMLTemplateElement from '../nodes/html-template-element/HTMLTemplateElement.js';
+import NodeTypeEnum from '../nodes/node/NodeTypeEnum.js';
+import ProcessingInstruction from '../nodes/processing-instruction/ProcessingInstruction.js';
+import DocumentFragment from '../nodes/document-fragment/DocumentFragment.js';
+import ShadowRoot from '../nodes/shadow-root/ShadowRoot.js';
+import HTMLElementConfig from '../config/HTMLElementConfig.js';
+import HTMLElementConfigContentModelEnum from '../config/HTMLElementConfigContentModelEnum.js';
+import XMLEncodeUtility from '../utilities/XMLEncodeUtility.js';
+
+/**
+ * Serializes a node into HTML.
+ */
+export default class HTMLSerializer {
+	private options: {
+		serializableShadowRoots: boolean;
+		shadowRoots: ShadowRoot[] | null;
+		allShadowRoots: boolean;
+	} = {
+		serializableShadowRoots: false,
+		shadowRoots: null,
+		allShadowRoots: false
+	};
+
+	/**
+	 * Constructor.
+	 *
+	 * @param [options] Options.
+	 * @param [options.serializableShadowRoots] If shadow roots should be serialized.
+	 * @param [options.shadowRoots] Shadow roots to serialize.
+	 * @param [options.allShadowRoots] If all shadow roots should be serialized.
+	 */
+	constructor(options?: {
+		serializableShadowRoots?: boolean;
+		shadowRoots?: ShadowRoot[] | null;
+		allShadowRoots?: boolean;
+	}) {
+		if (options) {
+			if (options.serializableShadowRoots) {
+				this.options.serializableShadowRoots = options.serializableShadowRoots;
+			}
+
+			if (options.shadowRoots) {
+				this.options.shadowRoots = options.shadowRoots;
+			}
+
+			if (options.allShadowRoots) {
+				this.options.allShadowRoots = options.allShadowRoots;
+			}
+		}
+	}
+
+	/**
+	 * Renders an element as HTML.
+	 *
+	 * @param root Root element.
+	 * @returns Result.
+	 */
+	public serializeToString(root: Node): string {
+		switch (root[PropertySymbol.nodeType]) {
+			case NodeTypeEnum.elementNode:
+				const element = <Element>root;
+				const prefix = element[PropertySymbol.prefix];
+				const localName = element[PropertySymbol.localName];
+				const config = HTMLElementConfig[element[PropertySymbol.localName]];
+				const tagName = prefix ? `${prefix}:${localName}` : localName;
+
+				if (config?.contentModel === HTMLElementConfigContentModelEnum.noDescendants) {
+					return `<${tagName}${this.getAttributes(element)}>`;
+				}
+
+				let innerHTML = '';
+
+				// TODO: Should we include closed shadow roots? We are currently only including open shadow roots.
+				if (
+					element.shadowRoot &&
+					(this.options.allShadowRoots ||
+						(this.options.serializableShadowRoots &&
+							element.shadowRoot[PropertySymbol.serializable]) ||
+						this.options.shadowRoots?.includes(element.shadowRoot))
+				) {
+					innerHTML += `<template shadowrootmode="${element.shadowRoot[PropertySymbol.mode]}"${
+						element.shadowRoot[PropertySymbol.serializable] ? ' shadowrootserializable=""' : ''
+					}>`;
+
+					for (const node of (<ShadowRoot>element.shadowRoot)[PropertySymbol.nodeArray]) {
+						innerHTML += this.serializeToString(node);
+					}
+
+					innerHTML += '</template>';
+				}
+
+				const childNodes =
+					tagName === 'template'
+						? (<DocumentFragment>(<HTMLTemplateElement>root).content)[PropertySymbol.nodeArray]
+						: (<DocumentFragment>root)[PropertySymbol.nodeArray];
+
+				for (const node of childNodes) {
+					innerHTML += this.serializeToString(node);
+				}
+
+				return `<${tagName}${this.getAttributes(element)}>${innerHTML}</${tagName}>`;
+			case Node.DOCUMENT_FRAGMENT_NODE:
+			case Node.DOCUMENT_NODE:
+				let html = '';
+				for (const node of (<Node>root)[PropertySymbol.nodeArray]) {
+					html += this.serializeToString(node);
+				}
+				return html;
+			case NodeTypeEnum.commentNode:
+				return `<!--${root.textContent}-->`;
+			case NodeTypeEnum.processingInstructionNode:
+				return `<!--?${(<ProcessingInstruction>root).target} ${root.textContent}?-->`;
+			case NodeTypeEnum.textNode:
+				const parentElement = root.parentElement;
+				if (parentElement) {
+					const parentConfig = HTMLElementConfig[parentElement[PropertySymbol.localName]];
+					if (parentConfig?.contentModel === HTMLElementConfigContentModelEnum.rawText) {
+						return root.textContent;
+					}
+				}
+				return XMLEncodeUtility.encodeTextContent(root.textContent);
+			case NodeTypeEnum.documentTypeNode:
+				const doctype = <DocumentType>root;
+				const identifier = doctype.publicId ? ' PUBLIC' : doctype.systemId ? ' SYSTEM' : '';
+				const publicId = doctype.publicId ? ` "${doctype.publicId}"` : '';
+				const systemId = doctype.systemId ? ` "${doctype.systemId}"` : '';
+				return `<!DOCTYPE ${doctype.name}${identifier}${publicId}${systemId}>`;
+		}
+
+		return '';
+	}
+
+	/**
+	 * Returns attributes as a string.
+	 *
+	 * @param element Element.
+	 * @returns Attributes.
+	 */
+	private getAttributes(element: Element): string {
+		let attributeString = '';
+
+		const namedItems = (<Element>element)[PropertySymbol.attributes][PropertySymbol.namedItems];
+
+		if (!namedItems.has('is') && element[PropertySymbol.isValue]) {
+			attributeString +=
+				' is="' + XMLEncodeUtility.encodeAttributeValue(element[PropertySymbol.isValue]) + '"';
+		}
+
+		for (const attributes of namedItems.values()) {
+			const escapedValue = XMLEncodeUtility.encodeAttributeValue(
+				attributes[0][PropertySymbol.value]
+			);
+			attributeString += ' ' + attributes[0][PropertySymbol.name] + '="' + escapedValue + '"';
+		}
+
+		return attributeString;
+	}
+}
diff --git a/packages/happy-dom/src/nodes/document/Document.ts b/packages/happy-dom/src/nodes/document/Document.ts
index b87298790..3ec60cde1 100644
--- a/packages/happy-dom/src/nodes/document/Document.ts
+++ b/packages/happy-dom/src/nodes/document/Document.ts
@@ -5,7 +5,6 @@ import Node from '../node/Node.js';
 import NodeIterator from '../../tree-walker/NodeIterator.js';
 import TreeWalker from '../../tree-walker/TreeWalker.js';
 import DocumentFragment from '../document-fragment/DocumentFragment.js';
-import XMLParser from '../../xml-parser/XMLParser.js';
 import Event from '../../event/Event.js';
 import DOMImplementation from '../../dom-implementation/DOMImplementation.js';
 import INodeFilter from '../../tree-walker/INodeFilter.js';
@@ -48,7 +47,8 @@ import HTMLTitleElement from '../html-title-element/HTMLTitleElement.js';
 import WindowBrowserContext from '../../window/WindowBrowserContext.js';
 import NodeFactory from '../NodeFactory.js';
 import SVGElementConfig from '../../config/SVGElementConfig.js';
-import StringUtility from '../../StringUtility.js';
+import StringUtility from '../../utilities/StringUtility.js';
+import HTMLParser from '../../html-parser/HTMLParser.js';
 
 const PROCESSING_INSTRUCTION_TARGET_REGEXP = /^[a-z][a-z0-9-]+$/;
 
@@ -65,7 +65,7 @@ export default class Document extends Node {
 	public [PropertySymbol.isFirstWrite] = true;
 	public [PropertySymbol.isFirstWriteAfterOpen] = false;
 	public [PropertySymbol.nodeType] = NodeTypeEnum.documentNode;
-	public [PropertySymbol.isConnected] = true;
+	public [PropertySymbol.isConnected] = false;
 	public [PropertySymbol.adoptedStyleSheets]: CSSStyleSheet[] = [];
 	public [PropertySymbol.implementation] = new DOMImplementation(this);
 	public [PropertySymbol.readyState] = DocumentReadyStateEnum.interactive;
@@ -78,6 +78,8 @@ export default class Document extends Node {
 		string,
 		{ htmlCollection: HTMLCollection<Element> | null; elements: Element[] }
 	> = new Map();
+	public [PropertySymbol.contentType]: string = 'text/html';
+	public [PropertySymbol.xmlProcessingInstruction]: ProcessingInstruction | null = null;
 	public declare cloneNode: (deep?: boolean) => Document;
 
 	// Private properties
@@ -408,7 +410,7 @@ export default class Document extends Node {
 	 * @returns Element.
 	 */
 	public get documentElement(): HTMLHtmlElement {
-		return <HTMLHtmlElement>ParentNodeUtility.getElementByTagName(this, 'html');
+		return <HTMLHtmlElement>this[PropertySymbol.elementArray][0] ?? null;
 	}
 
 	/**
@@ -431,7 +433,10 @@ export default class Document extends Node {
 	 * @returns Element.
 	 */
 	public get body(): HTMLBodyElement {
-		return <HTMLBodyElement>ParentNodeUtility.getElementByTagName(this, 'body');
+		const documentElement = this.documentElement;
+		return documentElement
+			? <HTMLBodyElement>ParentNodeUtility.getElementByTagName(documentElement, 'body')
+			: null;
 	}
 
 	/**
@@ -440,7 +445,10 @@ export default class Document extends Node {
 	 * @returns Element.
 	 */
 	public get head(): HTMLHeadElement {
-		return <HTMLHeadElement>ParentNodeUtility.getElementByTagName(this, 'head');
+		const documentElement = this.documentElement;
+		return documentElement
+			? <HTMLHeadElement>ParentNodeUtility.getElementByTagName(documentElement, 'head')
+			: null;
 	}
 
 	/**
@@ -595,6 +603,15 @@ export default class Document extends Node {
 		return this[PropertySymbol.currentScript];
 	}
 
+	/**
+	 * Returns content type.
+	 *
+	 * @returns Content type.
+	 */
+	public get contentType(): string {
+		return this[PropertySymbol.contentType];
+	}
+
 	/**
 	 * Inserts a set of Node objects or DOMString objects after the last child of the ParentNode. DOMString objects are inserted as equivalent Text nodes.
 	 *
@@ -830,8 +847,6 @@ export default class Document extends Node {
 	 * @param html HTML.
 	 */
 	public write(html: string): void {
-		const root = <DocumentFragment>XMLParser.parse(this, html, { evaluateScripts: true });
-
 		if (this[PropertySymbol.isFirstWrite] || this[PropertySymbol.isFirstWriteAfterOpen]) {
 			if (this[PropertySymbol.isFirstWrite]) {
 				if (!this[PropertySymbol.isFirstWriteAfterOpen]) {
@@ -841,88 +856,22 @@ export default class Document extends Node {
 				this[PropertySymbol.isFirstWrite] = false;
 			}
 
-			this[PropertySymbol.isFirstWriteAfterOpen] = false;
-			let documentElement = null;
-			let documentTypeNode = null;
-
-			for (const node of root[PropertySymbol.nodeArray]) {
-				if (node['tagName'] === 'HTML') {
-					documentElement = node;
-				} else if (node[PropertySymbol.nodeType] === NodeTypeEnum.documentTypeNode) {
-					documentTypeNode = node;
-				}
+			const { documentElement, head, body } = this;
 
-				if (documentElement && documentTypeNode) {
-					break;
-				}
+			if (!documentElement || !head || !body) {
+				this.open();
 			}
 
-			if (documentElement) {
-				if (!this.documentElement) {
-					if (documentTypeNode) {
-						this.appendChild(documentTypeNode);
-					}
-
-					this.appendChild(documentElement);
-
-					const head = ParentNodeUtility.getElementByTagName(this, 'head');
-					let body = ParentNodeUtility.getElementByTagName(this, 'body');
-
-					if (!body) {
-						body = this.createElement('body');
-						documentElement.appendChild(this.createElement('body'));
-					}
-
-					if (!head) {
-						documentElement.insertBefore(this.createElement('head'), body);
-					}
-				} else {
-					const rootBody = ParentNodeUtility.getElementByTagName(root, 'body');
-					const body = ParentNodeUtility.getElementByTagName(this, 'body');
-					if (rootBody && body) {
-						const childNodes = rootBody[PropertySymbol.nodeArray];
-						while (childNodes.length) {
-							body.appendChild(childNodes[0]);
-						}
-					}
-				}
-
-				// Remaining nodes outside the <html> element are added to the <body> element.
-				const body = ParentNodeUtility.getElementByTagName(this, 'body');
-				if (body) {
-					const childNodes = root[PropertySymbol.nodeArray];
-					while (childNodes.length) {
-						const child = childNodes[0];
-						if (
-							child['tagName'] !== 'HTML' &&
-							child[PropertySymbol.nodeType] !== NodeTypeEnum.documentTypeNode
-						) {
-							body.appendChild(child);
-						}
-					}
-				}
-			} else {
-				const documentElement = this.createElement('html');
-				const bodyElement = this.createElement('body');
-				const headElement = this.createElement('head');
-				const childNodes = root[PropertySymbol.nodeArray];
-
-				while (childNodes.length) {
-					bodyElement.appendChild(childNodes[0]);
-				}
-
-				documentElement.appendChild(headElement);
-				documentElement.appendChild(bodyElement);
+			this[PropertySymbol.isFirstWrite] = false;
+			this[PropertySymbol.isFirstWriteAfterOpen] = false;
 
-				this.appendChild(documentElement);
-			}
+			new HTMLParser(this[PropertySymbol.window], {
+				evaluateScripts: true
+			}).parse(html, this);
 		} else {
-			const bodyNode = ParentNodeUtility.getElementByTagName(root, 'body');
-			const body = ParentNodeUtility.getElementByTagName(this, 'body');
-			const childNodes = (<Element>(bodyNode || root))[PropertySymbol.nodeArray];
-			while (childNodes.length) {
-				body.appendChild(childNodes[0]);
-			}
+			new HTMLParser(this[PropertySymbol.window], {
+				evaluateScripts: true
+			}).parse(html, this.body);
 		}
 	}
 
@@ -957,6 +906,18 @@ export default class Document extends Node {
 			this.removeChild(childNodes[0]);
 		}
 
+		// 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);
+
 		return this;
 	}
 
@@ -1090,66 +1051,86 @@ export default class Document extends Node {
 			);
 		}
 
-		// SVG element
-		if (namespaceURI === NamespaceURI.svg) {
-			const config = SVGElementConfig[qualifiedName.toLowerCase()];
-			const elementClass =
-				config && config.localName === qualifiedName ? window[config.className] : window.SVGElement;
-
-			const element = NodeFactory.createNode<SVGElement>(this, elementClass);
-
-			element[PropertySymbol.tagName] = qualifiedName;
-			element[PropertySymbol.localName] = qualifiedName;
-			element[PropertySymbol.namespaceURI] = namespaceURI;
-			element[PropertySymbol.isValue] = options && options.is ? String(options.is) : null;
+		const parts = qualifiedName.split(':');
+		const localName = parts[1] ?? parts[0];
+		const prefix = parts[1] ? parts[0] : null;
+
+		switch (namespaceURI) {
+			case NamespaceURI.svg:
+				const config = SVGElementConfig[qualifiedName.toLowerCase()];
+				const svgElementClass =
+					config && config.localName === qualifiedName
+						? window[config.className]
+						: window.SVGElement;
+
+				const svgElement = NodeFactory.createNode<SVGElement>(this, svgElementClass);
+
+				svgElement[PropertySymbol.tagName] = qualifiedName;
+				svgElement[PropertySymbol.localName] = localName;
+				svgElement[PropertySymbol.prefix] = prefix;
+				svgElement[PropertySymbol.namespaceURI] = namespaceURI;
+				svgElement[PropertySymbol.isValue] = options && options.is ? String(options.is) : null;
+
+				return svgElement;
+			case NamespaceURI.html:
+				// Custom HTML element
+				// If a polyfill is used, [PropertySymbol.registry] may be undefined
+				const customElementDefinition = window.customElements[PropertySymbol.registry]?.get(
+					options && options.is ? String(options.is) : qualifiedName
+				);
+
+				if (customElementDefinition) {
+					const element = new customElementDefinition.elementClass();
+					element[PropertySymbol.tagName] = StringUtility.asciiUpperCase(qualifiedName);
+					element[PropertySymbol.localName] = localName;
+					element[PropertySymbol.prefix] = prefix;
+					element[PropertySymbol.namespaceURI] = namespaceURI;
+					element[PropertySymbol.isValue] = options && options.is ? String(options.is) : null;
+					return element;
+				}
 
-			return element;
-		}
+				const elementClass = HTMLElementConfig[qualifiedName]
+					? window[HTMLElementConfig[qualifiedName].className]
+					: null;
 
-		// Custom HTML element
-		const customElement =
-			window.customElements[PropertySymbol.registry]?.[
-				options && options.is ? String(options.is) : qualifiedName
-			];
-
-		if (customElement) {
-			const element = new customElement.elementClass();
-			element[PropertySymbol.tagName] = qualifiedName.toUpperCase();
-			element[PropertySymbol.localName] = qualifiedName;
-			element[PropertySymbol.namespaceURI] = namespaceURI;
-			element[PropertySymbol.isValue] = options && options.is ? String(options.is) : null;
-			return element;
-		}
+				// Known HTML element
+				if (elementClass) {
+					const element = NodeFactory.createNode<Element>(this, elementClass);
 
-		const elementClass = HTMLElementConfig[qualifiedName]
-			? window[HTMLElementConfig[qualifiedName].className]
-			: null;
+					element[PropertySymbol.tagName] = StringUtility.asciiUpperCase(qualifiedName);
+					element[PropertySymbol.localName] = localName;
+					element[PropertySymbol.prefix] = prefix;
+					element[PropertySymbol.namespaceURI] = namespaceURI;
+					element[PropertySymbol.isValue] = options && options.is ? String(options.is) : null;
 
-		// Known HTML element
-		if (elementClass) {
-			const element = NodeFactory.createNode<Element>(this, elementClass);
+					return element;
+				}
 
-			element[PropertySymbol.tagName] = qualifiedName.toUpperCase();
-			element[PropertySymbol.localName] = qualifiedName;
-			element[PropertySymbol.namespaceURI] = namespaceURI;
-			element[PropertySymbol.isValue] = options && options.is ? String(options.is) : null;
+				// Unknown HTML element (if it has an hyphen in the name, it is a custom element that hasn't been defined yet)
+				const unknownElementClass = qualifiedName.includes('-')
+					? window.HTMLElement
+					: window.HTMLUnknownElement;
 
-			return element;
-		}
+				const unknownElement = NodeFactory.createNode<Element>(this, unknownElementClass);
 
-		// Unknown HTML element (if it has an hyphen in the name, it is a custom element that hasn't been defined yet)
-		const unknownElementClass = qualifiedName.includes('-')
-			? window.HTMLElement
-			: window.HTMLUnknownElement;
+				unknownElement[PropertySymbol.tagName] = StringUtility.asciiUpperCase(qualifiedName);
+				unknownElement[PropertySymbol.localName] = localName;
+				unknownElement[PropertySymbol.prefix] = prefix;
+				unknownElement[PropertySymbol.namespaceURI] = namespaceURI;
+				unknownElement[PropertySymbol.isValue] = options && options.is ? String(options.is) : null;
 
-		const element = NodeFactory.createNode<Element>(this, unknownElementClass);
+				return unknownElement;
+			default:
+				const element = NodeFactory.createNode<Element>(this, Element);
 
-		element[PropertySymbol.tagName] = qualifiedName.toUpperCase();
-		element[PropertySymbol.localName] = qualifiedName;
-		element[PropertySymbol.namespaceURI] = namespaceURI;
-		element[PropertySymbol.isValue] = options && options.is ? String(options.is) : null;
+				element[PropertySymbol.tagName] = qualifiedName;
+				element[PropertySymbol.localName] = localName;
+				element[PropertySymbol.prefix] = prefix;
+				element[PropertySymbol.namespaceURI] = namespaceURI;
+				element[PropertySymbol.isValue] = options && options.is ? String(options.is) : null;
 
-		return element;
+				return element;
+		}
 	}
 
 	/* eslint-enable jsdoc/valid-types */
@@ -1239,7 +1220,7 @@ export default class Document extends Node {
 	 * @returns Attribute.
 	 */
 	public createAttribute(qualifiedName: string): Attr {
-		return this.createAttributeNS(null, qualifiedName.toLowerCase());
+		return this.createAttributeNS(null, StringUtility.asciiLowerCase(qualifiedName));
 	}
 
 	/**
@@ -1257,7 +1238,7 @@ export default class Document extends Node {
 		attribute[PropertySymbol.namespaceURI] = namespaceURI;
 		attribute[PropertySymbol.name] = qualifiedName;
 		attribute[PropertySymbol.localName] = parts[1] ?? qualifiedName;
-		attribute[PropertySymbol.prefix] = parts[0] ?? null;
+		attribute[PropertySymbol.prefix] = parts[1] ? parts[0] : null;
 
 		return attribute;
 	}
diff --git a/packages/happy-dom/src/nodes/element/Element.ts b/packages/happy-dom/src/nodes/element/Element.ts
index d22cfd4a4..039652b8f 100644
--- a/packages/happy-dom/src/nodes/element/Element.ts
+++ b/packages/happy-dom/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) {
diff --git a/packages/happy-dom/src/nodes/element/HTMLCollection.ts b/packages/happy-dom/src/nodes/element/HTMLCollection.ts
index eee45cbce..459f30ae6 100644
--- a/packages/happy-dom/src/nodes/element/HTMLCollection.ts
+++ b/packages/happy-dom/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);
 			}
 		}
diff --git a/packages/happy-dom/src/nodes/element/NamedNodeMap.ts b/packages/happy-dom/src/nodes/element/NamedNodeMap.ts
index bce3574cf..9b3be26f5 100644
--- a/packages/happy-dom/src/nodes/element/NamedNodeMap.ts
+++ b/packages/happy-dom/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]}`;
 	}
 }
diff --git a/packages/happy-dom/src/nodes/element/NamedNodeMapProxyFactory.ts b/packages/happy-dom/src/nodes/element/NamedNodeMapProxyFactory.ts
index a4c305fa0..0f401dec6 100644
--- a/packages/happy-dom/src/nodes/element/NamedNodeMapProxyFactory.ts
+++ b/packages/happy-dom/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
diff --git a/packages/happy-dom/src/nodes/html-button-element/HTMLButtonElement.ts b/packages/happy-dom/src/nodes/html-button-element/HTMLButtonElement.ts
index 1aa264253..c62e38cfc 100644
--- a/packages/happy-dom/src/nodes/html-button-element/HTMLButtonElement.ts
+++ b/packages/happy-dom/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;
 		}
diff --git a/packages/happy-dom/src/nodes/html-document/HTMLDocument.ts b/packages/happy-dom/src/nodes/html-document/HTMLDocument.ts
index 4a5366dc7..f08b4fffc 100644
--- a/packages/happy-dom/src/nodes/html-document/HTMLDocument.ts
+++ b/packages/happy-dom/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);
+	}
 }
diff --git a/packages/happy-dom/src/nodes/html-element/HTMLElement.ts b/packages/happy-dom/src/nodes/html-element/HTMLElement.ts
index ec77989a4..629eeb082 100644
--- a/packages/happy-dom/src/nodes/html-element/HTMLElement.ts
+++ b/packages/happy-dom/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]();
+		}
 	}
 }
diff --git a/packages/happy-dom/src/nodes/html-field-set-element/HTMLFieldSetElement.ts b/packages/happy-dom/src/nodes/html-field-set-element/HTMLFieldSetElement.ts
index b7dd2264f..0530ff1c2 100644
--- a/packages/happy-dom/src/nodes/html-field-set-element/HTMLFieldSetElement.ts
+++ b/packages/happy-dom/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;
 		}
diff --git a/packages/happy-dom/src/nodes/html-form-element/HTMLFormElement.ts b/packages/happy-dom/src/nodes/html-form-element/HTMLFormElement.ts
index 86b8fe922..b13757dc2 100644
--- a/packages/happy-dom/src/nodes/html-form-element/HTMLFormElement.ts
+++ b/packages/happy-dom/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);
 			}
 		}
diff --git a/packages/happy-dom/src/nodes/html-iframe-element/HTMLIFrameElement.ts b/packages/happy-dom/src/nodes/html-iframe-element/HTMLIFrameElement.ts
index 073d22c8f..e07113262 100644
--- a/packages/happy-dom/src/nodes/html-iframe-element/HTMLIFrameElement.ts
+++ b/packages/happy-dom/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();
diff --git a/packages/happy-dom/src/nodes/html-input-element/HTMLInputElement.ts b/packages/happy-dom/src/nodes/html-input-element/HTMLInputElement.ts
index fa2c71c25..8df2fd89b 100644
--- a/packages/happy-dom/src/nodes/html-input-element/HTMLInputElement.ts
+++ b/packages/happy-dom/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;
 		}
diff --git a/packages/happy-dom/src/nodes/html-media-element/TextTrackList.ts b/packages/happy-dom/src/nodes/html-media-element/TextTrackList.ts
index 5493d2c5c..009e66b17 100644
--- a/packages/happy-dom/src/nodes/html-media-element/TextTrackList.ts
+++ b/packages/happy-dom/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.
diff --git a/packages/happy-dom/src/nodes/html-object-element/HTMLObjectElement.ts b/packages/happy-dom/src/nodes/html-object-element/HTMLObjectElement.ts
index 243fd88a3..806d6338a 100644
--- a/packages/happy-dom/src/nodes/html-object-element/HTMLObjectElement.ts
+++ b/packages/happy-dom/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;
 		}
diff --git a/packages/happy-dom/src/nodes/html-output-element/HTMLOutputElement.ts b/packages/happy-dom/src/nodes/html-output-element/HTMLOutputElement.ts
index 938ded808..7b90cf7cd 100644
--- a/packages/happy-dom/src/nodes/html-output-element/HTMLOutputElement.ts
+++ b/packages/happy-dom/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;
 		}
diff --git a/packages/happy-dom/src/nodes/html-script-element/HTMLScriptElement.ts b/packages/happy-dom/src/nodes/html-script-element/HTMLScriptElement.ts
index 627c7f235..c42ac982c 100644
--- a/packages/happy-dom/src/nodes/html-script-element/HTMLScriptElement.ts
+++ b/packages/happy-dom/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;
diff --git a/packages/happy-dom/src/nodes/html-select-element/HTMLSelectElement.ts b/packages/happy-dom/src/nodes/html-select-element/HTMLSelectElement.ts
index bd64cb5f1..c2048e272 100644
--- a/packages/happy-dom/src/nodes/html-select-element/HTMLSelectElement.ts
+++ b/packages/happy-dom/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;
 		}
diff --git a/packages/happy-dom/src/nodes/html-table-element/HTMLTableElement.ts b/packages/happy-dom/src/nodes/html-table-element/HTMLTableElement.ts
index f3205c4bf..298d67bd9 100644
--- a/packages/happy-dom/src/nodes/html-table-element/HTMLTableElement.ts
+++ b/packages/happy-dom/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;
 		}
 
diff --git a/packages/happy-dom/src/nodes/html-table-row-element/HTMLTableRowElement.ts b/packages/happy-dom/src/nodes/html-table-row-element/HTMLTableRowElement.ts
index d5565d5bf..b6d93dd1d 100644
--- a/packages/happy-dom/src/nodes/html-table-row-element/HTMLTableRowElement.ts
+++ b/packages/happy-dom/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);
diff --git a/packages/happy-dom/src/nodes/html-template-element/HTMLTemplateElement.ts b/packages/happy-dom/src/nodes/html-template-element/HTMLTemplateElement.ts
index 7577cb679..98c33153a 100644
--- a/packages/happy-dom/src/nodes/html-template-element/HTMLTemplateElement.ts
+++ b/packages/happy-dom/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
+		);
 	}
 
 	/**
diff --git a/packages/happy-dom/src/nodes/html-text-area-element/HTMLTextAreaElement.ts b/packages/happy-dom/src/nodes/html-text-area-element/HTMLTextAreaElement.ts
index de0e05750..583d8746a 100644
--- a/packages/happy-dom/src/nodes/html-text-area-element/HTMLTextAreaElement.ts
+++ b/packages/happy-dom/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;
 		}
diff --git a/packages/happy-dom/src/nodes/node/Node.ts b/packages/happy-dom/src/nodes/node/Node.ts
index b6578a7a7..e87276f67 100644
--- a/packages/happy-dom/src/nodes/node/Node.ts
+++ b/packages/happy-dom/src/nodes/node/Node.ts
@@ -24,7 +24,6 @@ import HTMLFormElement from '../html-form-element/HTMLFormElement.js';
 import HTMLSelectElement from '../html-select-element/HTMLSelectElement.js';
 import HTMLTextAreaElement from '../html-text-area-element/HTMLTextAreaElement.js';
 import HTMLSlotElement from '../html-slot-element/HTMLSlotElement.js';
-import WindowBrowserContext from '../../window/WindowBrowserContext.js';
 import NodeFactory from '../NodeFactory.js';
 import SVGStyleElement from '../svg-style-element/SVGStyleElement.js';
 
@@ -315,16 +314,6 @@ export default class Node extends EventTarget {
 		return this[PropertySymbol.window].location.href;
 	}
 
-	/**
-	 * Connected callback.
-	 */
-	public connectedCallback?(): void;
-
-	/**
-	 * Disconnected callback.
-	 */
-	public disconnectedCallback?(): void;
-
 	/**
 	 * Returns "true" if the node has child nodes.
 	 *
@@ -603,18 +592,31 @@ export default class Node extends EventTarget {
 	 *
 	 * @param newNode Node to insert.
 	 * @param referenceNode Node to insert before.
+	 * @param [disableValidations=false] "true" to disable validations.
 	 * @returns Inserted node.
 	 */
-	public [PropertySymbol.insertBefore](newNode: Node, referenceNode: Node | null): Node {
+	public [PropertySymbol.insertBefore](
+		newNode: Node,
+		referenceNode: Node | null,
+		disableValidations = false
+	): Node {
 		if (newNode === referenceNode) {
 			return newNode;
 		}
 
-		if (NodeUtility.isInclusiveAncestor(newNode, this, true)) {
-			throw new this[PropertySymbol.window].DOMException(
-				"Failed to execute 'insertBefore' on 'Node': The new node is a parent of the node to insert to.",
-				DOMExceptionNameEnum.domException
-			);
+		if (!disableValidations) {
+			if (newNode === this) {
+				throw new this[PropertySymbol.window].DOMException(
+					"Failed to execute 'insertBefore' on 'Node': Not possible to insert a node as a child of itself."
+				);
+			}
+
+			if (NodeUtility.isInclusiveAncestor(newNode, this, true)) {
+				throw new this[PropertySymbol.window].DOMException(
+					"Failed to execute 'insertBefore' on 'Node': The new node is a parent of the node to insert to.",
+					DOMExceptionNameEnum.domException
+				);
+			}
 		}
 
 		// If the type is DocumentFragment, then the child nodes of if it should be moved instead of the actual node.
@@ -622,7 +624,7 @@ export default class Node extends EventTarget {
 		if (newNode[PropertySymbol.nodeType] === NodeTypeEnum.documentFragmentNode) {
 			const childNodes = (<Node>newNode)[PropertySymbol.nodeArray];
 			while (childNodes.length > 0) {
-				this.insertBefore(childNodes[0], referenceNode);
+				this[PropertySymbol.insertBefore](childNodes[0], referenceNode, true);
 			}
 			return newNode;
 		}
@@ -630,7 +632,7 @@ export default class Node extends EventTarget {
 		// If the referenceNode is null or undefined, then the newNode should be appended to the ancestorNode.
 		// According to spec only null is valid, but browsers support undefined as well.
 		if (!referenceNode) {
-			this.appendChild(newNode);
+			this[PropertySymbol.appendChild](newNode, true);
 			return newNode;
 		}
 
@@ -907,8 +909,26 @@ export default class Node extends EventTarget {
 	public [PropertySymbol.connectedToNode](): void {
 		const parentNode = this[PropertySymbol.parentNode];
 		const parent = parentNode || this[PropertySymbol.host];
+		let isConnected = false;
+		let isDisconnected = false;
+
+		if (!this[PropertySymbol.isConnected] && parent[PropertySymbol.isConnected]) {
+			this[PropertySymbol.isConnected] = true;
+			isConnected = true;
+		} else if (this[PropertySymbol.isConnected] && !parent[PropertySymbol.isConnected]) {
+			this[PropertySymbol.isConnected] = false;
+			isDisconnected = true;
+		}
+
+		this[PropertySymbol.ownerDocument] = parent[PropertySymbol.ownerDocument] || <Document>parent;
+		this[PropertySymbol.window] =
+			parent[PropertySymbol.window] || parent[PropertySymbol.defaultView];
 
 		if (parentNode) {
+			if (this[PropertySymbol.nodeType] !== NodeTypeEnum.documentFragmentNode) {
+				this[PropertySymbol.rootNode] = parentNode[PropertySymbol.rootNode];
+			}
+
 			if (parentNode[PropertySymbol.styleNode] && this[PropertySymbol.tagName] !== 'STYLE') {
 				this[PropertySymbol.styleNode] = parentNode[PropertySymbol.styleNode];
 			}
@@ -926,14 +946,9 @@ export default class Node extends EventTarget {
 			}
 		}
 
-		if (!this[PropertySymbol.isConnected] && parent[PropertySymbol.isConnected]) {
-			this[PropertySymbol.connectedToDocument]();
-		} else if (this[PropertySymbol.isConnected] && !parent[PropertySymbol.isConnected]) {
-			this[PropertySymbol.disconnectedFromDocument]();
-		}
-
 		const childNodes = this[PropertySymbol.nodeArray];
 		for (let i = 0, max = childNodes.length; i < max; i++) {
+			childNodes[i][PropertySymbol.parentNode] = this;
 			childNodes[i][PropertySymbol.connectedToNode]();
 		}
 
@@ -942,14 +957,20 @@ export default class Node extends EventTarget {
 			// eslint-disable-next-line
 			(<any>this)[PropertySymbol.shadowRoot][PropertySymbol.connectedToNode]();
 		}
+
+		if (isConnected) {
+			this[PropertySymbol.connectedToDocument]();
+		} else if (isDisconnected) {
+			this[PropertySymbol.disconnectedFromDocument]();
+		}
 	}
 
 	/**
 	 * Called when disconnected from a node.
 	 */
 	public [PropertySymbol.disconnectedFromNode](): void {
-		if (this[PropertySymbol.isConnected]) {
-			this[PropertySymbol.disconnectedFromDocument]();
+		if (this[PropertySymbol.nodeType] !== NodeTypeEnum.documentFragmentNode) {
+			this[PropertySymbol.rootNode] = null;
 		}
 
 		if (this[PropertySymbol.tagName] !== 'STYLE') {
@@ -968,9 +989,14 @@ export default class Node extends EventTarget {
 			this[PropertySymbol.selectNode] = null;
 		}
 
+		if (this[PropertySymbol.isConnected]) {
+			this[PropertySymbol.isConnected] = false;
+			this[PropertySymbol.disconnectedFromDocument]();
+		}
+
 		const childNodes = this[PropertySymbol.nodeArray];
 		for (let i = 0, max = childNodes.length; i < max; i++) {
-			childNodes[i][PropertySymbol.disconnectedFromNode]();
+			childNodes[i][PropertySymbol.connectedToNode]();
 		}
 
 		// eslint-disable-next-line
@@ -984,52 +1010,17 @@ export default class Node extends EventTarget {
 	 * Called when connected to document.
 	 */
 	public [PropertySymbol.connectedToDocument](): void {
-		this[PropertySymbol.isConnected] = true;
-
-		if (this[PropertySymbol.nodeType] !== NodeTypeEnum.documentFragmentNode) {
-			this[PropertySymbol.rootNode] = this[PropertySymbol.parentNode][PropertySymbol.rootNode];
-		}
-
 		// eslint-disable-next-line
 		if ((<any>this)[PropertySymbol.shadowRoot]) {
 			// eslint-disable-next-line
 			(<any>this)[PropertySymbol.shadowRoot][PropertySymbol.connectedToDocument]();
 		}
-
-		if (this.connectedCallback) {
-			const result = <void | Promise<void>>this.connectedCallback();
-
-			/**
-			 * It is common to import dependencies in the connectedCallback() method of web components.
-			 * As Happy DOM doesn't have support for dynamic imports yet, this is a temporary solution to wait for imports in connectedCallback().
-			 *
-			 * @see https://github.com/capricorn86/happy-dom/issues/1442
-			 */
-			if (result instanceof Promise) {
-				const asyncTaskManager = new WindowBrowserContext(
-					this[PropertySymbol.window]
-				).getAsyncTaskManager();
-				if (asyncTaskManager) {
-					const taskID = asyncTaskManager.startTask();
-					result
-						.then(() => asyncTaskManager.endTask(taskID))
-						.catch(() => asyncTaskManager.endTask(taskID));
-				}
-			}
-		}
 	}
 
 	/**
 	 * Called when disconnected from document.
-	 * @param e
 	 */
 	public [PropertySymbol.disconnectedFromDocument](): void {
-		this[PropertySymbol.isConnected] = false;
-
-		if (this[PropertySymbol.nodeType] !== NodeTypeEnum.documentFragmentNode) {
-			this[PropertySymbol.rootNode] = null;
-		}
-
 		if (this[PropertySymbol.ownerDocument][PropertySymbol.activeElement] === <unknown>this) {
 			this[PropertySymbol.ownerDocument][PropertySymbol.clearCache]();
 			this[PropertySymbol.ownerDocument][PropertySymbol.activeElement] = null;
@@ -1040,10 +1031,6 @@ export default class Node extends EventTarget {
 			// eslint-disable-next-line
 			(<any>this)[PropertySymbol.shadowRoot][PropertySymbol.disconnectedFromDocument]();
 		}
-
-		if (this.disconnectedCallback) {
-			this.disconnectedCallback();
-		}
 	}
 
 	/**
@@ -1095,13 +1082,13 @@ export default class Node extends EventTarget {
 				/**
 				 * 5.2.1. For each attr in node2’s attribute list:
 				 */
-				for (const attr of Array.from(
+				for (const attributes of Array.from(
 					(<Element>node2)[PropertySymbol.attributes][PropertySymbol.namedItems].values()
 				)) {
 					/**
 					 * 5.2.1.1. If attr equals attr1, then return the result of adding DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC and DOCUMENT_POSITION_PRECEDING.
 					 */
-					if (NodeUtility.isEqualNode(<Attr>attr, attr1)) {
+					if (NodeUtility.isEqualNode(attributes[0], attr1)) {
 						return (
 							Node.DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC | Node.DOCUMENT_POSITION_PRECEDING
 						);
@@ -1110,7 +1097,7 @@ export default class Node extends EventTarget {
 					/**
 					 * 5.2.1.2. If attr equals attr2, then return the result of adding DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC and DOCUMENT_POSITION_FOLLOWING.
 					 */
-					if (NodeUtility.isEqualNode(<Attr>attr, attr2)) {
+					if (NodeUtility.isEqualNode(attributes[0], attr2)) {
 						return (
 							Node.DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC | Node.DOCUMENT_POSITION_FOLLOWING
 						);
diff --git a/packages/happy-dom/src/nodes/node/NodeList.ts b/packages/happy-dom/src/nodes/node/NodeList.ts
index 03dac3d08..71b49276e 100644
--- a/packages/happy-dom/src/nodes/node/NodeList.ts
+++ b/packages/happy-dom/src/nodes/node/NodeList.ts
@@ -1,4 +1,4 @@
-import ClassMethodBinder from '../../ClassMethodBinder.js';
+import ClassMethodBinder from '../../utilities/ClassMethodBinder.js';
 import * as PropertySymbol from '../../PropertySymbol.js';
 import Node from './Node.js';
 
diff --git a/packages/happy-dom/src/nodes/node/NodeUtility.ts b/packages/happy-dom/src/nodes/node/NodeUtility.ts
index 244cefe79..8b5a2c323 100644
--- a/packages/happy-dom/src/nodes/node/NodeUtility.ts
+++ b/packages/happy-dom/src/nodes/node/NodeUtility.ts
@@ -209,9 +209,10 @@ export default class NodeUtility {
 			let found = false;
 			for (const attributeB of attributesB) {
 				if (
-					attributeA[PropertySymbol.namespaceURI] === attributeB[PropertySymbol.namespaceURI] &&
-					attributeA.localName === attributeB.localName &&
-					attributeA[PropertySymbol.value] === attributeB[PropertySymbol.value]
+					attributeA[0][PropertySymbol.namespaceURI] ===
+						attributeB[0][PropertySymbol.namespaceURI] &&
+					attributeA[0].localName === attributeB[0].localName &&
+					attributeA[0][PropertySymbol.value] === attributeB[0][PropertySymbol.value]
 				) {
 					found = true;
 					break;
diff --git a/packages/happy-dom/src/nodes/parent-node/ParentNodeUtility.ts b/packages/happy-dom/src/nodes/parent-node/ParentNodeUtility.ts
index 75dc2e51b..7d9dd5f73 100644
--- a/packages/happy-dom/src/nodes/parent-node/ParentNodeUtility.ts
+++ b/packages/happy-dom/src/nodes/parent-node/ParentNodeUtility.ts
@@ -161,7 +161,11 @@ export default class ParentNodeUtility {
 		tagName: string
 	): HTMLCollection<Element> {
 		// When the namespace is HTML, the tag name is case-insensitive.
-		const formattedTagName = namespaceURI === NamespaceURI.html ? tagName.toUpperCase() : tagName;
+		const formattedTagName =
+			namespaceURI === NamespaceURI.html &&
+			parentNode[PropertySymbol.ownerDocument][PropertySymbol.contentType] === 'text/html'
+				? tagName.toUpperCase()
+				: tagName;
 		const includeAll = tagName === '*';
 
 		const find = (
@@ -292,11 +296,7 @@ export default class ParentNodeUtility {
 			for (const element of (<DocumentFragment>parent)[PropertySymbol.elementArray]) {
 				element[PropertySymbol.affectsCache].push(cachedResult);
 
-				if (
-					element[PropertySymbol.attributes][PropertySymbol.namedItems].get('id')?.[
-						PropertySymbol.value
-					] === id
-				) {
+				if (element.getAttribute('id') === id) {
 					return <Element>element;
 				}
 
diff --git a/packages/happy-dom/src/nodes/shadow-root/ShadowRoot.ts b/packages/happy-dom/src/nodes/shadow-root/ShadowRoot.ts
index 2723a908d..8dd91b180 100644
--- a/packages/happy-dom/src/nodes/shadow-root/ShadowRoot.ts
+++ b/packages/happy-dom/src/nodes/shadow-root/ShadowRoot.ts
@@ -1,13 +1,13 @@
 import DocumentFragment from '../document-fragment/DocumentFragment.js';
 import * as PropertySymbol from '../../PropertySymbol.js';
-import XMLParser from '../../xml-parser/XMLParser.js';
-import XMLSerializer from '../../xml-serializer/XMLSerializer.js';
 import Element from '../element/Element.js';
 import CSSStyleSheet from '../../css/CSSStyleSheet.js';
 import HTMLElement from '../../nodes/html-element/HTMLElement.js';
 import Event from '../../event/Event.js';
 import SVGElement from '../svg-element/SVGElement.js';
 import Document from '../document/Document.js';
+import HTMLSerializer from '../../html-serializer/HTMLSerializer.js';
+import HTMLParser from '../../html-parser/HTMLParser.js';
 
 /**
  * ShadowRoot.
@@ -119,12 +119,12 @@ export default class ShadowRoot extends DocumentFragment {
 	 * @returns HTML.
 	 */
 	public get innerHTML(): string {
-		const xmlSerializer = new XMLSerializer();
-		let xml = '';
+		const serializer = new HTMLSerializer();
+		let html = '';
 		for (const node of this[PropertySymbol.nodeArray]) {
-			xml += xmlSerializer.serializeToString(node);
+			html += serializer.serializeToString(node);
 		}
-		return xml;
+		return html;
 	}
 
 	/**
@@ -139,7 +139,7 @@ export default class ShadowRoot extends DocumentFragment {
 			this.removeChild(childNodes[0]);
 		}
 
-		XMLParser.parse(this[PropertySymbol.ownerDocument], html, { rootNode: this });
+		new HTMLParser(this[PropertySymbol.window]).parse(html, this);
 	}
 
 	/**
@@ -211,7 +211,7 @@ export default class ShadowRoot extends DocumentFragment {
 			this.removeChild(childNodes[0]);
 		}
 
-		XMLParser.parse(this[PropertySymbol.ownerDocument], html, { rootNode: this });
+		new HTMLParser(this[PropertySymbol.window]).parse(html, this);
 	}
 
 	/**
diff --git a/packages/happy-dom/src/nodes/xml-document/XMLDocument.ts b/packages/happy-dom/src/nodes/xml-document/XMLDocument.ts
index dc01ddf70..54fff48a3 100644
--- a/packages/happy-dom/src/nodes/xml-document/XMLDocument.ts
+++ b/packages/happy-dom/src/nodes/xml-document/XMLDocument.ts
@@ -1,6 +1,10 @@
 import Document from '../document/Document.js';
+import * as PropertySymbol from '../../PropertySymbol.js';
 
 /**
  * Document.
  */
-export default class XMLDocument extends Document {}
+export default class XMLDocument extends Document {
+	// Internal properties
+	public [PropertySymbol.contentType]: string = 'application/xml';
+}
diff --git a/packages/happy-dom/src/query-selector/SelectorItem.ts b/packages/happy-dom/src/query-selector/SelectorItem.ts
index 81b7cdf1f..3e8228906 100644
--- a/packages/happy-dom/src/query-selector/SelectorItem.ts
+++ b/packages/happy-dom/src/query-selector/SelectorItem.ts
@@ -236,8 +236,7 @@ export default class SelectorItem {
 					? { priorityWeight: 10 }
 					: null;
 			case 'disabled':
-				return 'disabled' in element &&
-					element[PropertySymbol.attributes][PropertySymbol.namedItems].has('disabled')
+				return 'disabled' in element && element.hasAttribute('disabled')
 					? { priorityWeight: 10 }
 					: null;
 			case 'empty':
diff --git a/packages/happy-dom/src/range/Range.ts b/packages/happy-dom/src/range/Range.ts
index 45f3ed761..ea5910d3c 100644
--- a/packages/happy-dom/src/range/Range.ts
+++ b/packages/happy-dom/src/range/Range.ts
@@ -8,12 +8,12 @@ import DOMExceptionNameEnum from '../exception/DOMExceptionNameEnum.js';
 import RangeUtility from './RangeUtility.js';
 import NodeTypeEnum from '../nodes/node/NodeTypeEnum.js';
 import NodeUtility from '../nodes/node/NodeUtility.js';
-import XMLParser from '../xml-parser/XMLParser.js';
 import Comment from '../nodes/comment/Comment.js';
 import Text from '../nodes/text/Text.js';
 import DOMRectList from '../dom/DOMRectList.js';
 import IRangeBoundaryPoint from './IRangeBoundaryPoint.js';
 import BrowserWindow from '../window/BrowserWindow.js';
+import HTMLParser from '../html-parser/HTMLParser.js';
 
 /**
  * Range.
@@ -433,8 +433,8 @@ export default class Range {
 	 * @returns Document fragment.
 	 */
 	public createContextualFragment(tagString: string): DocumentFragment {
-		// TODO: We only have support for HTML in the parser currently, so it is not necessary to check which context it is
-		return <DocumentFragment>XMLParser.parse(this[PropertySymbol.ownerDocument], tagString);
+		// TODO: Implement support for checking which context to use
+		return <DocumentFragment>new HTMLParser(this[PropertySymbol.window]).parse(tagString);
 	}
 
 	/**
diff --git a/packages/happy-dom/src/storage/Storage.ts b/packages/happy-dom/src/storage/Storage.ts
index 32f819845..0b8b6b2eb 100644
--- a/packages/happy-dom/src/storage/Storage.ts
+++ b/packages/happy-dom/src/storage/Storage.ts
@@ -1,4 +1,4 @@
-import ClassMethodBinder from '../ClassMethodBinder.js';
+import ClassMethodBinder from '../utilities/ClassMethodBinder.js';
 import * as PropertySymbol from '../PropertySymbol.js';
 
 /**
diff --git a/packages/happy-dom/src/svg/SVGLengthList.ts b/packages/happy-dom/src/svg/SVGLengthList.ts
index ce9bb5b3b..c27d9a325 100644
--- a/packages/happy-dom/src/svg/SVGLengthList.ts
+++ b/packages/happy-dom/src/svg/SVGLengthList.ts
@@ -1,4 +1,4 @@
-import ClassMethodBinder from '../ClassMethodBinder.js';
+import ClassMethodBinder from '../utilities/ClassMethodBinder.js';
 import DOMExceptionNameEnum from '../exception/DOMExceptionNameEnum.js';
 import * as PropertySymbol from '../PropertySymbol.js';
 import BrowserWindow from '../window/BrowserWindow.js';
diff --git a/packages/happy-dom/src/svg/SVGNumberList.ts b/packages/happy-dom/src/svg/SVGNumberList.ts
index 76b252ba8..270262459 100644
--- a/packages/happy-dom/src/svg/SVGNumberList.ts
+++ b/packages/happy-dom/src/svg/SVGNumberList.ts
@@ -1,4 +1,4 @@
-import ClassMethodBinder from '../ClassMethodBinder.js';
+import ClassMethodBinder from '../utilities/ClassMethodBinder.js';
 import DOMExceptionNameEnum from '../exception/DOMExceptionNameEnum.js';
 import * as PropertySymbol from '../PropertySymbol.js';
 import BrowserWindow from '../window/BrowserWindow.js';
diff --git a/packages/happy-dom/src/svg/SVGPointList.ts b/packages/happy-dom/src/svg/SVGPointList.ts
index 873943f94..c5d005ae4 100644
--- a/packages/happy-dom/src/svg/SVGPointList.ts
+++ b/packages/happy-dom/src/svg/SVGPointList.ts
@@ -1,4 +1,4 @@
-import ClassMethodBinder from '../ClassMethodBinder.js';
+import ClassMethodBinder from '../utilities/ClassMethodBinder.js';
 import DOMExceptionNameEnum from '../exception/DOMExceptionNameEnum.js';
 import * as PropertySymbol from '../PropertySymbol.js';
 import BrowserWindow from '../window/BrowserWindow.js';
diff --git a/packages/happy-dom/src/svg/SVGStringList.ts b/packages/happy-dom/src/svg/SVGStringList.ts
index a6502ad85..8c31193bc 100644
--- a/packages/happy-dom/src/svg/SVGStringList.ts
+++ b/packages/happy-dom/src/svg/SVGStringList.ts
@@ -1,4 +1,4 @@
-import ClassMethodBinder from '../ClassMethodBinder.js';
+import ClassMethodBinder from '../utilities/ClassMethodBinder.js';
 import DOMExceptionNameEnum from '../exception/DOMExceptionNameEnum.js';
 import * as PropertySymbol from '../PropertySymbol.js';
 import BrowserWindow from '../window/BrowserWindow.js';
diff --git a/packages/happy-dom/src/svg/SVGTransformList.ts b/packages/happy-dom/src/svg/SVGTransformList.ts
index fb0ff0c6c..25adb95b1 100644
--- a/packages/happy-dom/src/svg/SVGTransformList.ts
+++ b/packages/happy-dom/src/svg/SVGTransformList.ts
@@ -1,4 +1,4 @@
-import ClassMethodBinder from '../ClassMethodBinder.js';
+import ClassMethodBinder from '../utilities/ClassMethodBinder.js';
 import DOMExceptionNameEnum from '../exception/DOMExceptionNameEnum.js';
 import * as PropertySymbol from '../PropertySymbol.js';
 import BrowserWindow from '../window/BrowserWindow.js';
diff --git a/packages/happy-dom/src/tree-walker/NodeIterator.ts b/packages/happy-dom/src/tree-walker/NodeIterator.ts
index fed8c2579..50eadbb8b 100644
--- a/packages/happy-dom/src/tree-walker/NodeIterator.ts
+++ b/packages/happy-dom/src/tree-walker/NodeIterator.ts
@@ -1,6 +1,8 @@
 import INodeFilter from './INodeFilter.js';
 import TreeWalker from './TreeWalker.js';
 import Node from '../nodes/node/Node.js';
+import * as PropertySymbol from '../PropertySymbol.js';
+import NodeFilter from './NodeFilter.js';
 
 /**
  * The NodeIterator object represents the nodes of a document subtree and a position within them.
@@ -9,11 +11,11 @@ import Node from '../nodes/node/Node.js';
  * https://developer.mozilla.org/en-US/docs/Web/API/NodeIterator
  */
 export default class NodeIterator {
-	public root: Node = null;
-	public whatToShow = -1;
-	public filter: INodeFilter = null;
-
-	readonly #walker: TreeWalker;
+	#root: Node = null;
+	#whatToShow = -1;
+	#filter: INodeFilter = null;
+	#walker: TreeWalker;
+	#atRoot = true;
 
 	/**
 	 * Constructor.
@@ -23,18 +25,52 @@ export default class NodeIterator {
 	 * @param [filter] Filter.
 	 */
 	constructor(root: Node, whatToShow = -1, filter: INodeFilter = null) {
-		this.root = root;
-		this.whatToShow = whatToShow;
-		this.filter = filter;
+		this.#root = root;
+		this.#whatToShow = whatToShow;
+		this.#filter = filter;
 		this.#walker = new TreeWalker(root, whatToShow, filter);
 	}
 
+	/**
+	 * Returns root.
+	 *
+	 * @returns Root.
+	 */
+	public get root(): Node | null {
+		return this.#root;
+	}
+
+	/**
+	 * Returns what to show.
+	 *
+	 * @returns What to show.
+	 */
+	public get whatToShow(): number {
+		return this.#whatToShow;
+	}
+
+	/**
+	 * Returns filter.
+	 *
+	 * @returns Filter.
+	 */
+	public get filter(): INodeFilter {
+		return this.#filter;
+	}
+
 	/**
 	 * Moves the current Node to the next visible node in the document order.
 	 *
 	 * @returns Current node.
 	 */
 	public nextNode(): Node {
+		if (this.#atRoot) {
+			this.#atRoot = false;
+			if (this.#walker[PropertySymbol.filterNode](this.#root) !== NodeFilter.FILTER_ACCEPT) {
+				return this.#walker.nextNode();
+			}
+			return this.#root;
+		}
 		return this.#walker.nextNode();
 	}
 
diff --git a/packages/happy-dom/src/tree-walker/TreeWalker.ts b/packages/happy-dom/src/tree-walker/TreeWalker.ts
index d13466a9a..f4a34b733 100644
--- a/packages/happy-dom/src/tree-walker/TreeWalker.ts
+++ b/packages/happy-dom/src/tree-walker/TreeWalker.ts
@@ -69,7 +69,7 @@ export default class TreeWalker {
 		) {
 			this.currentNode = this.currentNode[PropertySymbol.parentNode];
 
-			if (this.filterNode(this.currentNode) === NodeFilter.FILTER_ACCEPT) {
+			if (this[PropertySymbol.filterNode](this.currentNode) === NodeFilter.FILTER_ACCEPT) {
 				return this.currentNode;
 			}
 
@@ -92,7 +92,7 @@ export default class TreeWalker {
 		if (childNodes.length > 0) {
 			this.currentNode = childNodes[0];
 
-			if (this.filterNode(this.currentNode) === NodeFilter.FILTER_ACCEPT) {
+			if (this[PropertySymbol.filterNode](this.currentNode) === NodeFilter.FILTER_ACCEPT) {
 				return this.currentNode;
 			}
 
@@ -113,7 +113,7 @@ export default class TreeWalker {
 		if (childNodes.length > 0) {
 			this.currentNode = childNodes[childNodes.length - 1];
 
-			if (this.filterNode(this.currentNode) === NodeFilter.FILTER_ACCEPT) {
+			if (this[PropertySymbol.filterNode](this.currentNode) === NodeFilter.FILTER_ACCEPT) {
 				return this.currentNode;
 			}
 
@@ -142,7 +142,7 @@ export default class TreeWalker {
 			if (index > 0) {
 				this.currentNode = siblings[index - 1];
 
-				if (this.filterNode(this.currentNode) === NodeFilter.FILTER_ACCEPT) {
+				if (this[PropertySymbol.filterNode](this.currentNode) === NodeFilter.FILTER_ACCEPT) {
 					return this.currentNode;
 				}
 
@@ -172,7 +172,7 @@ export default class TreeWalker {
 			if (index + 1 < siblings.length) {
 				this.currentNode = siblings[index + 1];
 
-				if (this.filterNode(this.currentNode) === NodeFilter.FILTER_ACCEPT) {
+				if (this[PropertySymbol.filterNode](this.currentNode) === NodeFilter.FILTER_ACCEPT) {
 					return this.currentNode;
 				}
 
@@ -192,7 +192,7 @@ export default class TreeWalker {
 	 * @param node Node.
 	 * @returns Child nodes.
 	 */
-	private filterNode(node: Node): number {
+	public [PropertySymbol.filterNode](node: Node): number {
 		const mask = NodeFilterMask[node.nodeType];
 
 		if (mask && (this.whatToShow & mask) == 0) {
diff --git a/packages/happy-dom/src/ClassMethodBinder.ts b/packages/happy-dom/src/utilities/ClassMethodBinder.ts
similarity index 100%
rename from packages/happy-dom/src/ClassMethodBinder.ts
rename to packages/happy-dom/src/utilities/ClassMethodBinder.ts
diff --git a/packages/happy-dom/src/StringUtility.ts b/packages/happy-dom/src/utilities/StringUtility.ts
similarity index 100%
rename from packages/happy-dom/src/StringUtility.ts
rename to packages/happy-dom/src/utilities/StringUtility.ts
diff --git a/packages/happy-dom/src/utilities/XMLEncodeUtility.ts b/packages/happy-dom/src/utilities/XMLEncodeUtility.ts
new file mode 100644
index 000000000..67ad9c862
--- /dev/null
+++ b/packages/happy-dom/src/utilities/XMLEncodeUtility.ts
@@ -0,0 +1,127 @@
+/**
+ * Utility for encoding.
+ */
+export default class XMLEncodeUtility {
+	/**
+	 * Encodes attribute value.
+	 *
+	 * @param value Value.
+	 * @returns Escaped value.
+	 */
+	public static encodeAttributeValue(value: string | null): string {
+		if (value === null) {
+			return '';
+		}
+		return value
+			.replace(/&/gu, '&amp;')
+			.replace(/"/gu, '&quot;')
+			.replace(/</gu, '&lt;')
+			.replace(/>/gu, '&gt;')
+			.replace(/\t/gu, '&#x9;')
+			.replace(/\n/gu, '&#xA;')
+			.replace(/\r/gu, '&#xD;');
+	}
+
+	/**
+	 * Decodes attribute value.
+	 *
+	 * @param value Value.
+	 * @returns Decoded value.
+	 */
+	public static decodeAttributeValue(value: string | null): string {
+		if (value === null) {
+			return '';
+		}
+
+		return value
+			.replace(/&quot;/gu, '"')
+			.replace(/&lt;/gu, '<')
+			.replace(/&gt;/gu, '>')
+			.replace(/&#x9;/gu, '\t')
+			.replace(/&#xA;/gu, '\n')
+			.replace(/&#xD;/gu, '\r')
+			.replace(/&amp;/gu, '&');
+	}
+
+	/**
+	 * Encodes text content.
+	 *
+	 * @param text Value.
+	 * @returns Escaped value.
+	 */
+	public static encodeTextContent(text: string | null): string {
+		if (text === null) {
+			return '';
+		}
+
+		return text
+			.replace(/&/gu, '&amp;')
+			.replace(/\xA0/gu, '&nbsp;')
+			.replace(/</gu, '&lt;')
+			.replace(/>/gu, '&gt;');
+	}
+
+	/**
+	 * Decodes text content.
+	 *
+	 * @param text Value.
+	 * @returns Decoded value.
+	 */
+	public static decodeTextContent(text: string | null): string {
+		if (text === null) {
+			return '';
+		}
+
+		return text
+			.replace(/&nbsp;/gu, String.fromCharCode(160))
+			.replace(/&lt;/gu, '<')
+			.replace(/&gt;/gu, '>')
+			.replace(/&amp;/gu, '&');
+	}
+
+	/**
+	 * Decodes HTML entities.
+	 *
+	 * @param value Value.
+	 * @returns Decoded value.
+	 */
+	public static decodeHTMLEntities(value: string): string {
+		if (value === null) {
+			return '';
+		}
+
+		return value
+			.replace(/&lt;/gu, '<')
+			.replace(/&gt;/gu, '>')
+			.replace(/&nbsp;/gu, String.fromCharCode(160))
+			.replace(/&quot;/gu, '"')
+			.replace(/&apos;/gu, "'")
+			.replace(/&#(\d+);/gu, (_match, dec) => String.fromCharCode(parseInt(dec, 10)))
+			.replace(/&#x([A-Fa-f\d]+);/gu, (_match, hex) => String.fromCharCode(parseInt(hex, 16)))
+			.replace(/&amp;/gu, '&');
+	}
+
+	/**
+	 * Decodes XML entities.
+	 *
+	 * @param value Value.
+	 * @returns Decoded value.
+	 */
+	public static decodeXMLEntities(value: string): string {
+		if (value === null) {
+			return '';
+		}
+
+		return (
+			value
+				.replace(/&lt;/gu, '<')
+				.replace(/&gt;/gu, '>')
+				// "&nbsp;" Should not be supported in XML.
+				.replace(/&quot;/gu, '"')
+				.replace(/&apos;/gu, "'")
+				.replace(/&#(\d+);/gu, (_match, dec) => String.fromCharCode(parseInt(dec, 10)))
+				.replace(/&#x([A-Fa-f\d]+);/gu, (_match, hex) => String.fromCharCode(parseInt(hex, 16)))
+				.replace(/&amp;/gu, '&')
+		);
+	}
+}
diff --git a/packages/happy-dom/src/window/BrowserWindow.ts b/packages/happy-dom/src/window/BrowserWindow.ts
index 3f4aec222..e682056d4 100644
--- a/packages/happy-dom/src/window/BrowserWindow.ts
+++ b/packages/happy-dom/src/window/BrowserWindow.ts
@@ -305,6 +305,7 @@ import SVGTransformList from '../svg/SVGTransformList.js';
 import SVGUnitTypes from '../svg/SVGUnitTypes.js';
 import DOMPoint from '../dom/DOMPoint.js';
 import SVGAnimatedLengthList from '../svg/SVGAnimatedLengthList.js';
+import CustomElementReactionStack from '../custom-element/CustomElementReactionStack.js';
 
 const TIMER = {
 	setTimeout: globalThis.setTimeout.bind(globalThis),
@@ -792,6 +793,7 @@ export default class BrowserWindow extends EventTarget implements INodeJSGlobal
 	public [PropertySymbol.parent]: BrowserWindow = this;
 	public [PropertySymbol.window]: BrowserWindow = this;
 	public [PropertySymbol.internalId]: number = -1;
+	public [PropertySymbol.customElementReactionStack] = new CustomElementReactionStack(this);
 
 	// Private properties
 	#browserFrame: IBrowserFrame;
@@ -833,6 +835,17 @@ export default class BrowserWindow extends EventTarget implements INodeJSGlobal
 		// Document
 		this.document = new this.HTMLDocument();
 		this.document[PropertySymbol.defaultView] = this;
+		this.document[PropertySymbol.isConnected] = true;
+
+		this.document[PropertySymbol.nodeArray][0][PropertySymbol.isConnected] = true;
+
+		this.document[PropertySymbol.nodeArray][0][PropertySymbol.nodeArray][0][
+			PropertySymbol.isConnected
+		] = true;
+
+		this.document[PropertySymbol.nodeArray][0][PropertySymbol.nodeArray][1][
+			PropertySymbol.isConnected
+		] = true;
 
 		// Ready state manager
 		this[PropertySymbol.readyStateManager].waitUntilComplete().then(() => {
@@ -1669,14 +1682,14 @@ export default class BrowserWindow extends EventTarget implements INodeJSGlobal
 		this[PropertySymbol.mutationObservers] = [];
 
 		// Disconnects nodes from the document, so that they can be garbage collected.
-		const childNodes = this.document[PropertySymbol.nodeArray];
+		const childNodes = this.document.body[PropertySymbol.nodeArray];
 
 		while (childNodes.length > 0) {
 			// Makes sure that something won't be triggered by the disconnect.
-			if (childNodes[0].disconnectedCallback) {
-				delete childNodes[0].disconnectedCallback;
+			if ((<HTMLElement>childNodes[0]).disconnectedCallback) {
+				delete (<HTMLElement>childNodes[0]).disconnectedCallback;
 			}
-			this.document.removeChild(childNodes[0]);
+			this.document.body.removeChild(childNodes[0]);
 		}
 
 		// Create some empty elements for scripts that are still running.
@@ -1685,7 +1698,7 @@ export default class BrowserWindow extends EventTarget implements INodeJSGlobal
 		const bodyElement = this.document.createElement('body');
 		htmlElement.appendChild(headElement);
 		htmlElement.appendChild(bodyElement);
-		this.document.appendChild(htmlElement);
+		this.document.body.appendChild(htmlElement);
 
 		if (this.location[PropertySymbol.destroy]) {
 			this.location[PropertySymbol.destroy]();
diff --git a/packages/happy-dom/src/window/WindowErrorUtility.ts b/packages/happy-dom/src/window/WindowErrorUtility.ts
index c775ba496..6af1974d7 100644
--- a/packages/happy-dom/src/window/WindowErrorUtility.ts
+++ b/packages/happy-dom/src/window/WindowErrorUtility.ts
@@ -59,7 +59,7 @@ export default class WindowErrorUtility {
 		} else {
 			(<Element>elementOrWindow)[PropertySymbol.ownerDocument][
 				PropertySymbol.defaultView
-			].console.error(error);
+			]?.console.error(error);
 			(<Element>elementOrWindow).dispatchEvent(
 				new ErrorEvent('error', { message: error.message, error })
 			);
diff --git a/packages/happy-dom/src/xml-http-request/XMLHttpRequest.ts b/packages/happy-dom/src/xml-http-request/XMLHttpRequest.ts
index b49887308..0abbdbc3f 100644
--- a/packages/happy-dom/src/xml-http-request/XMLHttpRequest.ts
+++ b/packages/happy-dom/src/xml-http-request/XMLHttpRequest.ts
@@ -285,6 +285,8 @@ export default class XMLHttpRequest extends XMLHttpRequestEventTarget {
 	 * @param body Optional data to send as request body.
 	 */
 	public send(body?: Document | IRequestBody): void {
+		const window = this[PropertySymbol.window];
+
 		if (this.readyState != XMLHttpRequestReadyStateEnum.opened) {
 			throw new this[PropertySymbol.window].DOMException(
 				`Failed to execute 'send' on 'XMLHttpRequest': Connection must be opened before send() is called.`,
@@ -298,7 +300,7 @@ export default class XMLHttpRequest extends XMLHttpRequestEventTarget {
 			body !== null &&
 			(<Document>body)[PropertySymbol.nodeType] === NodeTypeEnum.documentNode
 		) {
-			body = (<Document>body).documentElement.outerHTML;
+			body = new window.XMLSerializer().serializeToString(<Document>body);
 		}
 
 		if (this.#async) {
diff --git a/packages/happy-dom/src/xml-http-request/XMLHttpRequestResponseDataParser.ts b/packages/happy-dom/src/xml-http-request/XMLHttpRequestResponseDataParser.ts
index bfebe8e9e..d8af8f7fb 100644
--- a/packages/happy-dom/src/xml-http-request/XMLHttpRequestResponseDataParser.ts
+++ b/packages/happy-dom/src/xml-http-request/XMLHttpRequestResponseDataParser.ts
@@ -48,7 +48,7 @@ export default class XMLHttpRequestResponseDataParser {
 				const domParser = new window.DOMParser();
 
 				try {
-					return domParser.parseFromString(options.data.toString(), 'text/xml');
+					return domParser.parseFromString(options.data.toString(), 'application/xml');
 				} catch (e) {
 					// Ignore error.
 				}
diff --git a/packages/happy-dom/src/xml-parser/XMLParser.ts b/packages/happy-dom/src/xml-parser/XMLParser.ts
index 079965c02..ea051a389 100755
--- a/packages/happy-dom/src/xml-parser/XMLParser.ts
+++ b/packages/happy-dom/src/xml-parser/XMLParser.ts
@@ -1,17 +1,10 @@
-import Document from '../nodes/document/Document.js';
 import * as PropertySymbol from '../PropertySymbol.js';
 import NamespaceURI from '../config/NamespaceURI.js';
-import HTMLScriptElement from '../nodes/html-script-element/HTMLScriptElement.js';
 import Element from '../nodes/element/Element.js';
-import HTMLLinkElement from '../nodes/html-link-element/HTMLLinkElement.js';
-import DocumentType from '../nodes/document-type/DocumentType.js';
 import Node from '../nodes/node/Node.js';
-import DocumentFragment from '../nodes/document-fragment/DocumentFragment.js';
-import HTMLElementConfig from '../config/HTMLElementConfig.js';
-import * as Entities from 'entities';
-import HTMLElementConfigContentModelEnum from '../config/HTMLElementConfigContentModelEnum.js';
-import SVGElementConfig from '../config/SVGElementConfig.js';
-import StringUtility from '../StringUtility.js';
+import BrowserWindow from '../window/BrowserWindow.js';
+import XMLDocument from '../nodes/xml-document/XMLDocument.js';
+import XMLEncodeUtility from '../utilities/XMLEncodeUtility.js';
 
 /**
  * Markup RegExp.
@@ -25,30 +18,31 @@ import StringUtility from '../StringUtility.js';
  * Group 7: End of self closing start tag (e.g. "/>" in "<img/>").
  * Group 8: End of start tag (e.g. ">" in "<div>").
  */
-const MARKUP_REGEXP =
-	/<([^\s/!>?]+)|<\/([^\s/!>?]+)\s*>|<!--([^-]+)-->|<!--([^>]+)>|<!([^>]*)>|<\?([^>]+)>|(\/>)|(>)/gm;
+const MARKUP_REGEXP = /<([^\s/!>?]+)|<\/([^\s/!>?]+)\s*>|(<!--)|(-->)|(<!)|(<\?)|(\/>)|(>)/gm;
 
 /**
  * Attribute RegExp.
  *
  * Group 1: Attribute name when the attribute has a value using double apostrophe (e.g. "name" in "<div name="value">").
  * Group 2: Attribute value when the attribute has a value using double apostrophe (e.g. "value" in "<div name="value">").
- * Group 3: Attribute name when the attribute has a value using double apostrophe (e.g. "name" in "<div name="value">").
- * Group 4: Attribute value when the attribute has a value using double apostrophe (e.g. "value" in "<div name="value">").
- * Group 5: Attribute end apostrophe when the attribute has a value using double apostrophe (e.g. '"' in "<div name="value">").
- * Group 6: Attribute name when the attribute has a value using single apostrophe (e.g. "name" in "<div name='value'>").
- * Group 7: Attribute value when the attribute has a value using single apostrophe (e.g. "value" in "<div name='value'>").
- * Group 8: Attribute end apostrophe when the attribute has a value using single apostrophe (e.g. "'" in "<div name='value'>").
- * Group 9: Attribute name when the attribute has no value (e.g. "disabled" in "<div disabled>").
+ * Group 3: Attribute end apostrophe when the attribute has a value using double apostrophe (e.g. '"' in "<div name="value">").
+ * Group 4: Attribute name when the attribute has a value using single apostrophe (e.g. "name" in "<div name='value'>").
+ * Group 5: Attribute value when the attribute has a value using single apostrophe (e.g. "value" in "<div name='value'>").
+ * Group 6: Attribute end apostrophe when the attribute has a value using single apostrophe (e.g. "'" in "<div name='value'>").
+ * Group 7: Attribute name when the attribute has no value (e.g. "disabled" in "<div disabled>").
  */
 const ATTRIBUTE_REGEXP =
-	/\s*([a-zA-Z0-9-_:.$@?\\]+) *= *([a-zA-Z0-9-_:.$@?{}/]+)|\s*([a-zA-Z0-9-_:.$@?\\]+) *= *"([^"]*)("{0,1})|\s*([a-zA-Z0-9-_:.$@?\\]+) *= *'([^']*)('{0,1})|\s*([a-zA-Z0-9-_:.$@?\\]+)/gm;
+	/\s*([a-zA-Z0-9-_:]+)\s*=\s*"([^"]*)("{0,1})|\s*([a-zA-Z0-9-_:]+)\s*=\s*'([^']*)('{0,1})/gm;
 
-enum MarkupReadStateEnum {
-	startOrEndTag = 'startOrEndTag',
-	insideStartTag = 'insideStartTag',
-	plainTextContent = 'plainTextContent'
-}
+/**
+ * Attribute without value RegExp.
+ */
+const ATTRIBUTE_WITHOUT_VALUE_REGEXP = /^\s*([a-zA-Z0-9-_:]+)$/;
+
+/**
+ * XML processing instruction version RegExp.
+ */
+const XML_PROCESSING_INSTRUCTION_VERSION_REGEXP = /version="[^"]+"/;
 
 /**
  * Document type attribute RegExp.
@@ -57,333 +51,653 @@ enum MarkupReadStateEnum {
  */
 const DOCUMENT_TYPE_ATTRIBUTE_REGEXP = /"([^"]+)"/gm;
 
+/**
+ * Space RegExp.
+ */
+const SPACE_REGEXP = /\s+/;
+
+/**
+ * New line RegExp.
+ */
+const NEW_LINE_REGEXP = /\n/g;
+
+/**
+ * Markup read state (which state the parser is in).
+ */
+enum MarkupReadStateEnum {
+	any = 'any',
+	startTag = 'startTag',
+	comment = 'comment',
+	documentType = 'documentType',
+	processingInstruction = 'processingInstruction',
+	error = 'error'
+}
+
+/**
+ * Document type.
+ */
+interface IDocumentType {
+	name: string;
+	publicId: string;
+	systemId: string;
+}
+
+const NAMESPACE_URIS = Object.values(NamespaceURI);
+
 /**
  * XML parser.
- *
- * @see https://html.spec.whatwg.org/multipage/indices.html
  */
 export default class XMLParser {
+	private window: BrowserWindow;
+	private rootNode: XMLDocument | null = null;
+	private nodeStack: Node[] = [];
+	private tagNameStack: string[] = [];
+	private defaultNamespaceStack: string[] | null = null;
+	private namespacePrefixStack: Array<Map<string, string>> | null = null;
+	private startTagIndex = 0;
+	private markupRegExp: RegExp | null = null;
+	private lastIndex = 0;
+	private errorIndex = 0;
+	private nextElement: Element | null = null;
+	private nextTagName: string | null = null;
+	private currentNode: Node | null = null;
+	private readState: MarkupReadStateEnum = MarkupReadStateEnum.any;
+	private errorMessage: string | null = null;
+
 	/**
-	 * Parses XML/HTML and returns a root element.
+	 * Constructor.
 	 *
-	 * @param document Document.
-	 * @param xml XML/HTML string.
+	 * @param window Window.
 	 * @param [options] Options.
-	 * @param [options.rootNode] Node to append elements to. Otherwise a new DocumentFragment is created.
-	 * @param [options.evaluateScripts = false] Set to "true" to enable script execution.
-	 * @returns Root node.
+	 * @param [options.mode] Mode. Defaults to "htmlFragment".
+	 * @param [options.evaluateScripts] Set to "true" to enable script execution
 	 */
-	public static parse(
-		document: Document,
-		xml: string,
-		options?: { rootNode?: Element | DocumentFragment | Document; evaluateScripts?: boolean }
-	): Element | DocumentFragment | Document {
-		const root = options && options.rootNode ? options.rootNode : document.createDocumentFragment();
-		const nodeStack: Node[] = [root];
-		const localNameStack: string[] = [null];
-		const markupRegexp = new RegExp(MARKUP_REGEXP, 'gm');
-		const { evaluateScripts = false } = options || {};
-		let newNode: Node | null = null;
-		let currentNode: Node | null = root;
+	constructor(window: BrowserWindow) {
+		this.window = window;
+	}
+	/**
+	 * Parses XML and returns an XML document containing nodes found.
+	 *
+	 * @param xml XML string.
+	 * @returns XML document.
+	 */
+	public parse(xml: string): XMLDocument {
+		this.rootNode = new this.window.XMLDocument();
+		this.nodeStack = [this.rootNode];
+		this.tagNameStack = [null];
+		this.currentNode = this.rootNode;
+		this.readState = <MarkupReadStateEnum>MarkupReadStateEnum.any;
+		this.defaultNamespaceStack = [null];
+		this.namespacePrefixStack = [null];
+		this.startTagIndex = 0;
+		this.errorIndex = 0;
+		this.errorMessage = null;
+		this.markupRegExp = new RegExp(MARKUP_REGEXP, 'gm');
+		this.lastIndex = 0;
 		let match: RegExpExecArray;
-		let readState: MarkupReadStateEnum = MarkupReadStateEnum.startOrEndTag;
-		let startTagIndex = 0;
-		let lastIndex = 0;
-
-		if (xml !== null && xml !== undefined) {
-			xml = String(xml);
-
-			while ((match = markupRegexp.exec(xml))) {
-				switch (readState) {
-					case MarkupReadStateEnum.startOrEndTag:
-						if (
-							match.index !== lastIndex &&
-							(match[1] || match[2] || match[3] || match[4] || match[5] !== undefined || match[6])
-						) {
-							// Plain text between tags.
-							currentNode[PropertySymbol.appendChild](
-								document.createTextNode(Entities.decodeHTML(xml.substring(lastIndex, match.index))),
-								true
-							);
+
+		this.rootNode[PropertySymbol.defaultView] = this.window;
+
+		xml = String(xml);
+
+		while ((match = this.markupRegExp.exec(xml))) {
+			switch (this.readState) {
+				case MarkupReadStateEnum.any:
+					if (
+						match.index !== this.lastIndex &&
+						(match[1] || match[2] || match[3] || match[4] || match[5] !== undefined || match[6])
+					) {
+						// Plain text between tags.
+						this.parsePlainText(xml.substring(this.lastIndex, match.index));
+					}
+
+					if (match[1]) {
+						// Start tag.
+						this.parseStartTag(match[1]);
+					} else if (match[2]) {
+						// End tag.
+						if (!this.parseEndTag(match[2])) {
+							this.errorMessage = `Opening and ending tag mismatch: ${
+								this.tagNameStack[this.tagNameStack.length - 1]
+							} line ${xml.substring(0, this.startTagIndex).split('\n').length} and ${match[2]}\n`;
+							this.errorIndex = this.markupRegExp.lastIndex;
+							this.readState = MarkupReadStateEnum.error;
+							this.removeOverflowingTextNodes();
 						}
+					} else if (match[3]) {
+						// Comment.
+						this.startTagIndex = this.markupRegExp.lastIndex;
+						this.readState = MarkupReadStateEnum.comment;
+					} else if (match[5] !== undefined) {
+						// Document type
+						this.startTagIndex = this.markupRegExp.lastIndex;
+						this.readState = MarkupReadStateEnum.documentType;
+					} else if (match[6]) {
+						// Processing instruction.
+						this.startTagIndex = this.markupRegExp.lastIndex;
+						this.readState = MarkupReadStateEnum.processingInstruction;
+					} else {
+						// Plain text between tags, including the matched tag as it is not a valid start or end tag.
+						this.parsePlainText(xml.substring(this.lastIndex, this.markupRegExp.lastIndex));
+					}
+
+					break;
+				case MarkupReadStateEnum.startTag:
+					// End of start tag
+
+					// match[7] is matching "/>" (e.g. "<img/>").
+					// match[8] is matching ">" (e.g. "<div>").
+					if (match[7] || match[8]) {
+						const attributeString = xml.substring(
+							this.startTagIndex,
+							match[2] ? this.markupRegExp.lastIndex - 1 : match.index
+						);
+						const isSelfClosed = !!match[7];
+
+						this.parseEndOfStartTag(attributeString, isSelfClosed);
+					} else {
+						this.errorMessage =
+							match[2] && this.lastIndex !== this.startTagIndex
+								? `Unescaped '&lt;' not allowed in attributes values\n`
+								: 'error parsing attribute name\n';
+						this.errorIndex = match.index;
+						this.readState = MarkupReadStateEnum.error;
+						this.removeOverflowingTextNodes();
+					}
+					break;
+				case MarkupReadStateEnum.comment:
+					// Comment end tag.
+
+					if (match[4]) {
+						this.parseComment(xml.substring(this.startTagIndex, match.index));
+					}
+					break;
+				case MarkupReadStateEnum.documentType:
+					// Document type end tag.
+
+					if (match[7] || match[8]) {
+						this.parseDocumentType(xml.substring(this.startTagIndex, match.index));
+					}
+					break;
+				case MarkupReadStateEnum.processingInstruction:
+					// Processing instruction end tag.
+
+					if (match[7] || match[8]) {
+						this.parseProcessingInstruction(xml.substring(this.startTagIndex, match.index));
+					}
+					break;
+				case MarkupReadStateEnum.error:
+					this.parseError(xml.slice(0, this.errorIndex), this.errorMessage);
+					return this.rootNode;
+			}
 
-						if (match[1]) {
-							// Start tag.
-							const name = StringUtility.asciiLowerCase(match[1]);
-
-							// NamespaceURI is inherited from the parent element.
-							// NamespaceURI should be SVG for SVGSVGElement.
-							const namespaceURI =
-								name === 'svg'
-									? NamespaceURI.svg
-									: (<Element>currentNode)[PropertySymbol.namespaceURI] || NamespaceURI.html;
-
-							// SVG elements are resolved to their local name during parsing.
-							// This should probably be handled in an XML document.
-							const qualifiedName =
-								namespaceURI === NamespaceURI.svg && SVGElementConfig[name]
-									? SVGElementConfig[name].localName
-									: name;
-
-							// Create a new element.
-							newNode = document.createElementNS(namespaceURI, qualifiedName);
-
-							readState = MarkupReadStateEnum.insideStartTag;
-							startTagIndex = markupRegexp.lastIndex;
-						} else if (match[2]) {
-							// End tag.
-
-							// We close all tags up until the first tag that matches the end tag.
-							const localName = StringUtility.asciiLowerCase(match[2]);
-							const index = localNameStack.lastIndexOf(localName);
-							if (index !== -1) {
-								nodeStack.splice(index, nodeStack.length - index);
-								localNameStack.splice(index, localNameStack.length - index);
-								currentNode = nodeStack[nodeStack.length - 1] || root;
-							}
-						} else if (
-							match[3] ||
-							match[4] ||
-							(match[6] &&
-								(<Element>currentNode)[PropertySymbol.namespaceURI] === NamespaceURI.html)
-						) {
-							// Comment.
-
-							let comment: string;
-
-							if (match[3]) {
-								comment = match[3];
-							} else if (match[4]) {
-								comment = match[4].endsWith('--') ? match[4].slice(0, -2) : match[4];
-							} else {
-								comment = '?' + match[6];
-							}
+			this.lastIndex = this.markupRegExp.lastIndex;
+		}
 
-							currentNode[PropertySymbol.appendChild](
-								document.createComment(Entities.decodeHTML(comment)),
-								true
-							);
-						} else if (match[5] !== undefined) {
-							// Exclamation mark comment.
-							// Document type node or comment.
-							const exclamationComment = Entities.decodeHTML(match[5]);
-							currentNode[PropertySymbol.appendChild](
-								this.getDocumentTypeNode(document, exclamationComment) ||
-									document.createComment(exclamationComment),
-								true
-							);
-						} else if (match[6]) {
-							// Processing instruction (not supported by HTML).
-							// TODO: Add support for processing instructions.
-						} else {
-							// Plain text between tags, including the match as it is not a valid start or end tag.
-
-							currentNode[PropertySymbol.appendChild](
-								document.createTextNode(
-									Entities.decodeHTML(xml.substring(lastIndex, markupRegexp.lastIndex))
-								),
-								true
-							);
-						}
+		if (this.readState === MarkupReadStateEnum.error) {
+			this.parseError(xml.slice(0, this.errorIndex), this.errorMessage);
+			return this.rootNode;
+		}
 
-						break;
-					case MarkupReadStateEnum.insideStartTag:
-						// End of start tag
-						if (match[7] || match[8]) {
-							// Attribute name and value.
-
-							const attributeString = xml.substring(startTagIndex, match.index);
-							let hasAttributeStringEnded = true;
-
-							if (!!attributeString) {
-								const attributeRegexp = new RegExp(ATTRIBUTE_REGEXP, 'gm');
-								let attributeMatch: RegExpExecArray;
-
-								while ((attributeMatch = attributeRegexp.exec(attributeString))) {
-									if (
-										(attributeMatch[1] && attributeMatch[2]) ||
-										(attributeMatch[3] && attributeMatch[5] === '"') ||
-										(attributeMatch[6] && attributeMatch[8] === "'") ||
-										attributeMatch[9]
-									) {
-										// Valid attribute name and value.
-										const name =
-											attributeMatch[1] ||
-											attributeMatch[3] ||
-											attributeMatch[6] ||
-											attributeMatch[9] ||
-											'';
-										const rawValue =
-											attributeMatch[2] || attributeMatch[4] || attributeMatch[7] || '';
-										const value = rawValue ? Entities.decodeHTMLAttribute(rawValue) : '';
-
-										if ((<Element>newNode)[PropertySymbol.namespaceURI] === NamespaceURI.svg) {
-											// In XML and SVG namespaces, the attribute "xmlns" should be set to the "http://www.w3.org/2000/xmlns/" namespace.
-											const attributeItem = document.createAttributeNS(
-												name === 'xmlns' ? NamespaceURI.xmlns : null,
-												name
-											);
-											attributeItem[PropertySymbol.value] = value;
-											(<Element>newNode)[PropertySymbol.attributes][PropertySymbol.setNamedItem](
-												attributeItem
-											);
-										} else {
-											const attributeItem = document.createAttribute(name);
-											attributeItem[PropertySymbol.value] = value;
-											(<Element>newNode)[PropertySymbol.attributes][PropertySymbol.setNamedItem](
-												attributeItem
-											);
-										}
-
-										startTagIndex += attributeMatch[0].length;
-									} else if (
-										!attributeMatch[1] &&
-										((attributeMatch[3] && !attributeMatch[5]) ||
-											(attributeMatch[6] && !attributeMatch[8]))
-									) {
-										// End attribute apostrophe is missing (e.g. "attr='value" or 'attr="value').
-										hasAttributeStringEnded = false;
-										break;
-									}
-								}
-							}
+		if (this.readState === MarkupReadStateEnum.comment) {
+			this.parseError(xml, 'Comment not terminated\n');
+			this.removeOverflowingTextNodes();
+			return this.rootNode;
+		}
 
-							// We need to check if the attribute string is read completely.
-							// The attribute string can potentially contain "/>" or ">".
-							if (hasAttributeStringEnded) {
-								const config = HTMLElementConfig[(<Element>newNode)[PropertySymbol.localName]];
-								const localName = StringUtility.asciiLowerCase(
-									(<Element>newNode)[PropertySymbol.localName]
-								);
+		// Missing start tag (e.g. when parsing just a string like "Test").
+		if (this.rootNode[PropertySymbol.elementArray].length === 0) {
+			this.parseError('', `Start tag expected, '&lt;' not found`);
+			return this.rootNode;
+		}
 
-								// Some elements are not allowed to be nested (e.g. "<a><a></a></a>" is not allowed.).
-								// Therefore we need to auto-close the tag, so that it become valid (e.g. "<a></a><a></a>").
-								if (
-									config?.contentModel ===
-										HTMLElementConfigContentModelEnum.noFirstLevelSelfDescendants &&
-									localNameStack[localNameStack.length - 1] === localName
-								) {
-									nodeStack.pop();
-									localNameStack.pop();
-									currentNode = nodeStack[nodeStack.length - 1] || root;
-								} else if (
-									config?.contentModel === HTMLElementConfigContentModelEnum.noSelfDescendants &&
-									localNameStack.includes(localName)
-								) {
-									while (currentNode !== root) {
-										if ((<Element>currentNode)[PropertySymbol.localName] === localName) {
-											nodeStack.pop();
-											localNameStack.pop();
-											currentNode = nodeStack[nodeStack.length - 1] || root;
-											break;
-										}
-										nodeStack.pop();
-										localNameStack.pop();
-										currentNode = nodeStack[nodeStack.length - 1] || root;
-									}
-								}
+		// Plain text after tags.
+		if (this.lastIndex !== xml.length && this.currentNode) {
+			this.parsePlainText(xml.substring(this.lastIndex));
+		}
 
-								// Appends the new node to its parent and sets is as current node.
-								currentNode[PropertySymbol.appendChild](newNode, true);
-								currentNode = newNode;
-								nodeStack.push(currentNode);
-								localNameStack.push(localName);
-								newNode = null;
-
-								// Checks if the tag is a self closing tag (ends with "/>") or void element.
-								// When it is a self closing tag or void element it should be closed immediately.
-								// Self closing tags are not allowed in the HTML namespace, but the parser should still allow it for void elements.
-								// Self closing tags is supported in the SVG namespace.
-								if (
-									config?.contentModel === HTMLElementConfigContentModelEnum.noDescendants ||
-									// SVG tag is self closing (<svg/>).
-									(match[7] &&
-										(<Element>currentNode)[PropertySymbol.namespaceURI] === NamespaceURI.svg)
-								) {
-									nodeStack.pop();
-									localNameStack.pop();
-									currentNode = nodeStack[nodeStack.length - 1] || root;
-									readState = MarkupReadStateEnum.startOrEndTag;
-								} else {
-									readState =
-										config?.contentModel === HTMLElementConfigContentModelEnum.rawText
-											? MarkupReadStateEnum.plainTextContent
-											: MarkupReadStateEnum.startOrEndTag;
-								}
+		// Missing end tag.
+		if (this.nodeStack.length !== 1) {
+			this.parseError(
+				xml,
+				this.nextElement
+					? 'attributes construct error\n'
+					: 'Premature end of data in tag article line 1\n'
+			);
+			return this.rootNode;
+		}
+
+		return this.rootNode;
+	}
+
+	/**
+	 * Parses plain text.
+	 *
+	 * @param text Text.
+	 */
+	private parsePlainText(text: string): void {
+		if (this.currentNode === this.rootNode) {
+			const xmlText = text.replace(SPACE_REGEXP, '');
+			if (xmlText) {
+				this.errorMessage = 'Extra content at the end of the document\n';
+				this.errorIndex = this.lastIndex;
+				this.readState = MarkupReadStateEnum.error;
+			}
+		} else if (text.includes('&nbsp;')) {
+			this.errorMessage = `Entity 'nbsp' not defined\n`;
+			this.errorIndex = this.lastIndex + text.indexOf('&nbsp;') + 6;
+			this.readState = MarkupReadStateEnum.error;
+		} else {
+			this.currentNode[PropertySymbol.appendChild](
+				this.rootNode.createTextNode(XMLEncodeUtility.decodeXMLEntities(text)),
+				true
+			);
+		}
+	}
+
+	/**
+	 * Parses processing instruction.
+	 *
+	 * @param text Text.
+	 */
+	private parseProcessingInstruction(text: string): void {
+		const parts = text.split(SPACE_REGEXP);
+		const endsWithQuestionMark = text[text.length - 1] === '?';
+
+		if (parts[0] === 'xml') {
+			if (
+				this.currentNode !== this.rootNode ||
+				this.rootNode[PropertySymbol.nodeArray].length !== 0 ||
+				parts.length === 1
+			) {
+				this.errorMessage = 'XML declaration allowed only at the start of the document\n';
+				this.errorIndex = this.markupRegExp.lastIndex - text.length + 2;
+				this.readState = MarkupReadStateEnum.error;
+				this.removeOverflowingTextNodes();
+			} else if (!XML_PROCESSING_INSTRUCTION_VERSION_REGEXP.test(parts[1])) {
+				this.errorMessage = 'Malformed declaration expecting version\n';
+				this.errorIndex = this.markupRegExp.lastIndex - text.length + 3;
+				this.readState = MarkupReadStateEnum.error;
+			} else if (!endsWithQuestionMark) {
+				this.errorMessage = 'Blank needed here\n';
+				this.errorIndex = this.markupRegExp.lastIndex - 1;
+				this.readState = MarkupReadStateEnum.error;
+			} else {
+				// When the processing instruction has "xml" as target, we should not add it as a child node.
+				// Instead we will store the state on the root node, so that it is added when serializing the document with XMLSerializer.
+				// TODO: We need to handle validation of encoding.
+				const name = parts[0];
+				// We need to remove the ending "?".
+				const content = parts.slice(1).join(' ').slice(0, -1);
+				this.rootNode[PropertySymbol.xmlProcessingInstruction] =
+					this.rootNode.createProcessingInstruction(name, content);
+				this.readState = MarkupReadStateEnum.any;
+			}
+		} else {
+			if (parts.length === 1 && !endsWithQuestionMark) {
+				this.errorMessage = 'ParsePI: PI processing-instruction space expected\n';
+				this.errorIndex = this.markupRegExp.lastIndex - 1;
+				this.readState = MarkupReadStateEnum.error;
+			} else if (parts.length > 1 && !endsWithQuestionMark) {
+				this.errorMessage = 'ParsePI: PI processing-instruction never end ...\n';
+				this.errorIndex = this.markupRegExp.lastIndex - 1;
+				this.readState = MarkupReadStateEnum.error;
+			} else {
+				const name = parts[0];
+				// We need to remove the ending "?".
+				const content = parts.slice(1).join(' ').slice(0, -1);
+				this.currentNode[PropertySymbol.appendChild](
+					this.rootNode.createProcessingInstruction(name, content),
+					true
+				);
+				this.readState = MarkupReadStateEnum.any;
+			}
+		}
+	}
+
+	/**
+	 * Parses comment.
+	 *
+	 * @param comment Comment.
+	 */
+	private parseComment(comment: string): void {
+		// Comments are not allowed in the root when parsing XML.
+		if (this.currentNode !== this.rootNode) {
+			this.currentNode[PropertySymbol.appendChild](
+				this.rootNode.createComment(XMLEncodeUtility.decodeXMLEntities(comment)),
+				true
+			);
+		}
+		this.readState = MarkupReadStateEnum.any;
+	}
 
-								startTagIndex = markupRegexp.lastIndex;
+	/**
+	 * Parses document type.
+	 *
+	 * @param text Text.
+	 */
+	private parseDocumentType(text: string): void {
+		if (
+			this.currentNode === this.rootNode &&
+			this.rootNode[PropertySymbol.nodeArray].length === 0
+		) {
+			const documentType = this.getDocumentType(XMLEncodeUtility.decodeXMLEntities(text));
+
+			if (documentType?.name) {
+				this.rootNode[PropertySymbol.appendChild](
+					this.window.document.implementation.createDocumentType(
+						documentType.name,
+						documentType.publicId,
+						documentType.systemId
+					),
+					true
+				);
+				this.readState = MarkupReadStateEnum.any;
+			} else if (documentType) {
+				this.errorMessage = 'xmlParseDocTypeDecl : no DOCTYPE name\n';
+				this.errorIndex = this.markupRegExp.lastIndex - text.length - 2;
+				this.readState = MarkupReadStateEnum.error;
+			} else {
+				this.errorMessage = 'StartTag: invalid element name\n';
+				this.errorIndex = this.markupRegExp.lastIndex - text.length - 2;
+				this.readState = MarkupReadStateEnum.error;
+			}
+		} else if (
+			this.currentNode === this.rootNode &&
+			this.rootNode[PropertySymbol.elementArray].length === 1
+		) {
+			this.errorMessage = 'Extra content at the end of the document\n';
+			this.errorIndex = this.markupRegExp.lastIndex - text.length - 2;
+			this.readState = MarkupReadStateEnum.error;
+		} else {
+			this.errorMessage = 'StartTag: invalid element name\n';
+			this.errorIndex = this.markupRegExp.lastIndex - text.length - 2;
+			this.readState = MarkupReadStateEnum.error;
+		}
+	}
+
+	/**
+	 * Parses start tag.
+	 *
+	 * @param tagName Tag name.
+	 */
+	private parseStartTag(tagName: string): void {
+		const parts = tagName.split(':');
+
+		if (parts.length > 1) {
+			this.nextElement = this.rootNode.createElementNS(
+				this.namespacePrefixStack[this.namespacePrefixStack.length - 1]?.get(parts[0]) || null,
+				tagName
+			);
+		} else {
+			this.nextElement = this.rootNode.createElementNS(
+				this.defaultNamespaceStack[this.defaultNamespaceStack.length - 1] || null,
+				tagName
+			);
+		}
+
+		this.namespacePrefixStack.push(
+			new Map(this.namespacePrefixStack[this.namespacePrefixStack.length - 1])
+		);
+
+		this.nextTagName = tagName;
+
+		this.startTagIndex = this.markupRegExp.lastIndex;
+		this.readState = MarkupReadStateEnum.startTag;
+	}
+
+	/**
+	 * Parses end of start tag.
+	 *
+	 * @param attributeString Attribute string.
+	 * @param isSelfClosed Is self closed.
+	 */
+	private parseEndOfStartTag(attributeString: string, isSelfClosed: boolean): void {
+		const namespacePrefix = this.namespacePrefixStack[this.namespacePrefixStack.length - 1];
+
+		if (attributeString) {
+			const attributeRegexp = new RegExp(ATTRIBUTE_REGEXP, 'gm');
+			let attributeMatch: RegExpExecArray;
+			let lastIndex = 0;
+
+			while ((attributeMatch = attributeRegexp.exec(attributeString))) {
+				const textBetweenAttributes = attributeString
+					.substring(lastIndex, attributeMatch.index)
+					.replace(SPACE_REGEXP, '');
+
+				// If there is text between attributes, the text did not match a valid attribute.
+				if (textBetweenAttributes.length) {
+					const match = textBetweenAttributes.match(ATTRIBUTE_WITHOUT_VALUE_REGEXP);
+					this.errorMessage = match
+						? `Specification mandates value for attribute ${match[1]}\n`
+						: 'attributes construct error\n';
+					this.errorIndex = this.startTagIndex;
+					this.readState = MarkupReadStateEnum.error;
+					this.removeOverflowingTextNodes();
+					return;
+				}
+
+				if (
+					(attributeMatch[1] && attributeMatch[3] === '"') ||
+					(attributeMatch[4] && attributeMatch[6] === "'")
+				) {
+					// Valid attribute name and value.
+					const name = attributeMatch[1] ?? attributeMatch[4];
+					const rawValue = attributeMatch[2] ?? attributeMatch[5];
+
+					// In XML, new line characters should be replaced with a space.
+					const value = rawValue
+						? XMLEncodeUtility.decodeAttributeValue(rawValue.replace(NEW_LINE_REGEXP, ' '))
+						: '';
+					const attributes = this.nextElement[PropertySymbol.attributes];
+					const nameParts = name.split(':');
+
+					if (
+						nameParts.length > 2 ||
+						(nameParts.length === 2 && (!nameParts[0] || !nameParts[1]))
+					) {
+						this.errorMessage = `Failed to parse QName '${name}'\n`;
+						this.errorIndex =
+							this.startTagIndex + attributeMatch.index + attributeMatch[0].split('=')[0].length;
+						this.readState = MarkupReadStateEnum.error;
+						return;
+					}
+
+					// In XML, attributes prefixed with "xmlns:" or named "xmlns" should be set to the "http://www.w3.org/2000/xmlns/" namespace.
+					const namespaceURI = nameParts[0] === 'xmlns' ? NamespaceURI.xmlns : null;
+
+					if (!attributes.getNamedItemNS(namespaceURI, name)) {
+						const attributeItem = this.rootNode.createAttributeNS(namespaceURI, name);
+						attributeItem[PropertySymbol.value] = value;
+						attributes[PropertySymbol.setNamedItem](attributeItem);
+
+						// Attributes prefixed with "xmlns:" should be added to the namespace prefix map, so that the prefix can be added as namespaceURI to elements using the prefix.
+						if (attributeItem[PropertySymbol.prefix] === 'xmlns') {
+							namespacePrefix.set(attributeItem[PropertySymbol.localName], value);
+
+							// If the prefix matches the current element, we should set the namespace URI of the element to the value of the attribute.
+							// We don't need to upgrade the element, as there are no defined element types using a prefix.
+							if (
+								this.nextElement[PropertySymbol.prefix] === attributeItem[PropertySymbol.localName]
+							) {
+								this.nextElement[PropertySymbol.namespaceURI] = value;
 							}
 						}
-
-						break;
-					case MarkupReadStateEnum.plainTextContent:
-						const localName = currentNode[PropertySymbol.localName];
-
-						if (localName && match[2] && StringUtility.asciiLowerCase(match[2]) === localName) {
-							// End of plain text tag.
-
-							// Scripts are not allowed to be executed when they are parsed using innerHTML, outerHTML, replaceWith() etc.
-							// However, they are allowed to be executed when document.write() is used.
-							// See: https://developer.mozilla.org/en-US/docs/Web/API/HTMLScriptElement
-							if (localName === 'script') {
-								(<HTMLScriptElement>currentNode)[PropertySymbol.evaluateScript] = evaluateScripts;
-							} else if (localName === 'link') {
-								// An assumption that the same rule should be applied for the HTMLLinkElement is made here.
-								(<HTMLLinkElement>currentNode)[PropertySymbol.evaluateCSS] = evaluateScripts;
+						// If the attribute is "xmlns", we should upgrade the element to an element created using the namespace URI.
+						else if (name === 'xmlns' && !this.nextElement[PropertySymbol.prefix]) {
+							// We only need to create a new instance if it is a known namespace URI.
+							if (NAMESPACE_URIS.includes(value)) {
+								this.nextElement = this.rootNode.createElementNS(
+									value,
+									this.nextElement[PropertySymbol.tagName]
+								);
+								this.nextElement[PropertySymbol.attributes] = attributes;
+								attributes[PropertySymbol.ownerElement] = this.nextElement;
+								for (const attr of attributes[PropertySymbol.namespaceItems].values()) {
+									attr[PropertySymbol.ownerElement] = this.nextElement;
+								}
+							} else {
+								this.nextElement[PropertySymbol.namespaceURI] = value;
 							}
-
-							// Plain text elements such as <script> and <style> should only contain text.
-							currentNode[PropertySymbol.appendChild](
-								document.createTextNode(
-									Entities.decodeHTML(xml.substring(startTagIndex, match.index))
-								),
-								true
-							);
-
-							nodeStack.pop();
-							localNameStack.pop();
-							currentNode = nodeStack[nodeStack.length - 1] || root;
-							readState = MarkupReadStateEnum.startOrEndTag;
 						}
-
-						break;
+					} else {
+						this.errorMessage = `Attribute ${name} redefined\n`;
+						this.errorIndex = this.startTagIndex;
+						this.readState = MarkupReadStateEnum.error;
+					}
+
+					this.startTagIndex += attributeMatch[0].length;
+				} else if (
+					(attributeMatch[1] && attributeMatch[3] !== '"') ||
+					(attributeMatch[4] && attributeMatch[6] !== "'")
+				) {
+					// End attribute apostrophe is missing (e.g. "attr='value" or 'attr="value').
+					// We should continue to the next end of start tag match.
+					return;
 				}
 
-				lastIndex = markupRegexp.lastIndex;
+				lastIndex = attributeRegexp.lastIndex;
 			}
 
-			// We expected the "newNode" to be null if the start tag was closed correctly.
-			// We should append the last node to the current node to correct it.
-			if (newNode && currentNode) {
-				currentNode[PropertySymbol.appendChild](newNode, true);
+			const attributeStringEnd = attributeString.substring(lastIndex).replace(SPACE_REGEXP, '');
+
+			if (attributeStringEnd.length) {
+				const match = attributeStringEnd.match(ATTRIBUTE_WITHOUT_VALUE_REGEXP);
+				if (match) {
+					this.errorMessage = `Specification mandates value for attribute ${match[1]}\n`;
+					this.errorIndex = this.markupRegExp.lastIndex - 2;
+				} else {
+					this.errorMessage = 'attributes construct error\n';
+					this.errorIndex = this.startTagIndex;
+				}
+				this.readState = MarkupReadStateEnum.error;
+				this.removeOverflowingTextNodes();
+				return;
 			}
+		}
 
-			if (lastIndex !== xml.length) {
-				// Plain text after tags.
+		// Prefixed elements need to have a namespace URI defined by a prefixed "xmlns:" attribute either by a parent or in the current element.
+		if (this.nextElement[PropertySymbol.prefix] && !this.nextElement[PropertySymbol.namespaceURI]) {
+			this.errorMessage = `Namespace prefix ${
+				this.nextElement[PropertySymbol.prefix]
+			} on name is not defined\n`;
+			this.errorIndex = this.lastIndex;
+			this.readState = MarkupReadStateEnum.error;
+			return;
+		}
 
-				currentNode[PropertySymbol.appendChild](
-					document.createTextNode(Entities.decodeHTML(xml.substring(lastIndex))),
-					true
+		// Only one document element is allowed in the document.
+		if (
+			this.currentNode === this.rootNode &&
+			this.rootNode[PropertySymbol.elementArray].length !== 0
+		) {
+			this.errorMessage = 'Extra content at the end of the document\n';
+			this.errorIndex = this.lastIndex - this.nextElement[PropertySymbol.tagName].length - 1;
+			this.readState = MarkupReadStateEnum.error;
+			return;
+		}
+
+		this.currentNode[PropertySymbol.appendChild](this.nextElement, true);
+
+		// Sets the new element as the current node.
+		// XML nodes can be self closed using "/>"
+		if (!isSelfClosed) {
+			this.currentNode = this.nextElement;
+			this.nodeStack.push(this.currentNode);
+			this.tagNameStack.push(this.nextTagName);
+
+			if (
+				this.currentNode[PropertySymbol.namespaceURI] &&
+				!this.currentNode[PropertySymbol.prefix]
+			) {
+				this.defaultNamespaceStack.push(this.currentNode[PropertySymbol.namespaceURI]);
+			} else {
+				this.defaultNamespaceStack.push(
+					this.defaultNamespaceStack[this.defaultNamespaceStack.length - 1]
 				);
 			}
 		}
 
-		return root;
+		this.nextElement = null;
+		this.nextTagName = null;
+		this.readState = MarkupReadStateEnum.any;
+		this.startTagIndex = this.markupRegExp.lastIndex;
 	}
 
 	/**
-	 * Returns document type node.
+	 * Parses end tag.
+	 *
+	 * @param tagName Tag name.
+	 * @returns True if the end tag was parsed, false otherwise.
+	 */
+	private parseEndTag(tagName: string): boolean {
+		if (this.tagNameStack[this.tagNameStack.length - 1] === tagName) {
+			this.nodeStack.pop();
+			this.tagNameStack.pop();
+			this.namespacePrefixStack.pop();
+			this.defaultNamespaceStack.pop();
+			this.currentNode = this.nodeStack[this.nodeStack.length - 1] || this.rootNode;
+			return true;
+		}
+		return false;
+	}
+
+	/**
+	 * Parses XML document error.
+	 *
+	 * @param readXML XML that has been read.
+	 * @param errorMessage Error message.
+	 */
+	private parseError(readXML: string, errorMessage: string): void {
+		let errorRoot: Element = (<XMLDocument>this.rootNode).documentElement;
+
+		if (!errorRoot) {
+			const documentElement = this.rootNode.createElementNS(NamespaceURI.html, 'html');
+			const body = this.rootNode.createElementNS(NamespaceURI.html, 'body');
+			documentElement.appendChild(body);
+			errorRoot = body;
+			this.rootNode[PropertySymbol.appendChild](documentElement, true);
+		}
+
+		const rows = readXML.split('\n');
+		const column = rows[rows.length - 1].length + 1;
+		const error = `error on line ${rows.length} at column ${column}: ${errorMessage}`;
+		const errorElement = this.rootNode.createElementNS(NamespaceURI.html, 'parsererror');
+
+		errorElement.setAttribute(
+			'style',
+			'display: block; white-space: pre; border: 2px solid #c77; padding: 0 1em 0 1em; margin: 1em; background-color: #fdd; color: black'
+		);
+		errorElement.innerHTML = `<h3>This page contains the following errors:</h3><div style="font-family:monospace;font-size:12px">${error}</div><h3>Below is a rendering of the page up to the first error.</h3>`;
+
+		errorRoot.insertBefore(errorElement, errorRoot.firstChild);
+	}
+
+	/**
+	 * Removes overflowing text nodes in the current node.
+	 *
+	 * This needs to be done for some errors.
+	 */
+	private removeOverflowingTextNodes(): void {
+		if (this.currentNode && this.currentNode !== this.rootNode) {
+			while (this.currentNode.lastChild?.[PropertySymbol.nodeType] === Node.TEXT_NODE) {
+				this.currentNode.removeChild(this.currentNode.lastChild);
+			}
+		}
+	}
+
+	/**
+	 * Returns document type.
 	 *
-	 * @param document Document.
 	 * @param value Value.
-	 * @returns Document type node.
+	 * @returns Document type.
 	 */
-	private static getDocumentTypeNode(document: Document, value: string): DocumentType {
+	private getDocumentType(value: string): IDocumentType {
 		if (!value.toUpperCase().startsWith('DOCTYPE')) {
 			return null;
 		}
 
-		const docTypeSplit = value.split(' ');
+		const docTypeSplit = value.split(SPACE_REGEXP);
 
 		if (docTypeSplit.length <= 1) {
 			return null;
@@ -402,10 +716,10 @@ export default class XMLParser {
 		const publicId = isPublic ? attributes[0] || '' : '';
 		const systemId = isPublic ? attributes[1] || '' : attributes[0] || '';
 
-		return document.implementation.createDocumentType(
-			docTypeSplit[1].toLowerCase(),
+		return {
+			name: docTypeSplit[1].toLowerCase(),
 			publicId,
 			systemId
-		);
+		};
 	}
 }
diff --git a/packages/happy-dom/src/xml-serializer/XMLSerializer.ts b/packages/happy-dom/src/xml-serializer/XMLSerializer.ts
index 376c338ea..f568a5b9c 100644
--- a/packages/happy-dom/src/xml-serializer/XMLSerializer.ts
+++ b/packages/happy-dom/src/xml-serializer/XMLSerializer.ts
@@ -4,88 +4,110 @@ import Node from '../nodes/node/Node.js';
 import DocumentType from '../nodes/document-type/DocumentType.js';
 import HTMLTemplateElement from '../nodes/html-template-element/HTMLTemplateElement.js';
 import NodeTypeEnum from '../nodes/node/NodeTypeEnum.js';
-import ProcessingInstruction from '../nodes/processing-instruction/ProcessingInstruction.js';
-import * as Entities from 'entities';
 import DocumentFragment from '../nodes/document-fragment/DocumentFragment.js';
-import ShadowRoot from '../nodes/shadow-root/ShadowRoot.js';
 import HTMLElementConfig from '../config/HTMLElementConfig.js';
 import HTMLElementConfigContentModelEnum from '../config/HTMLElementConfigContentModelEnum.js';
+import ProcessingInstruction from '../nodes/processing-instruction/ProcessingInstruction.js';
+import NamespaceURI from '../config/NamespaceURI.js';
+import XMLEncodeUtility from '../utilities/XMLEncodeUtility.js';
 
 /**
- * Utility for converting an element to string.
+ * Serializes a node into XML.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/XMLSerializer
  */
 export default class XMLSerializer {
-	public [PropertySymbol.options]: {
-		serializableShadowRoots: boolean;
-		shadowRoots: ShadowRoot[] | null;
-		allShadowRoots: boolean;
-	} = {
-		serializableShadowRoots: false,
-		shadowRoots: null,
-		allShadowRoots: false
-	};
-
 	/**
-	 * Renders an element as HTML.
+	 * Serializes a node into XML.
 	 *
-	 * @param root Root element.
+	 * @param root Root node.
 	 * @returns Result.
 	 */
 	public serializeToString(root: Node): string {
-		const options = this[PropertySymbol.options];
+		return this.#serializeToString(root);
+	}
 
+	/**
+	 * Serializes a node into XML.
+	 *
+	 * @param root Root node.
+	 * @param [inheritedDefaultNamespace] Default namespace.
+	 * @param [inheritedNamespacePrefixes] Inherited namespace prefixes.
+	 * @returns Result.
+	 */
+	#serializeToString(
+		root: Node,
+		inheritedDefaultNamespace: string | null = null,
+		inheritedNamespacePrefixes: Map<string, string> = null
+	): string {
 		switch (root[PropertySymbol.nodeType]) {
 			case NodeTypeEnum.elementNode:
 				const element = <Element>root;
 				const localName = element[PropertySymbol.localName];
-				const config = HTMLElementConfig[element[PropertySymbol.localName]];
-
-				if (config?.contentModel === HTMLElementConfigContentModelEnum.noDescendants) {
-					return `<${localName}${this.getAttributes(element)}>`;
-				}
 
 				let innerHTML = '';
 
-				// TODO: Should we include closed shadow roots? We are currently only including open shadow roots.
-				if (
-					element.shadowRoot &&
-					(options.allShadowRoots ||
-						(options.serializableShadowRoots && element.shadowRoot[PropertySymbol.serializable]) ||
-						options.shadowRoots?.includes(element.shadowRoot))
-				) {
-					innerHTML += `<template shadowrootmode="${element.shadowRoot[PropertySymbol.mode]}"${
-						element.shadowRoot[PropertySymbol.serializable] ? ' shadowrootserializable=""' : ''
-					}>`;
-
-					for (const node of (<ShadowRoot>element.shadowRoot)[PropertySymbol.nodeArray]) {
-						innerHTML += this.serializeToString(node);
-					}
-
-					innerHTML += '</template>';
-				}
+				const namespacePrefixes = this.#getNamespacePrefixes(element, inheritedNamespacePrefixes);
+				const elementPrefix =
+					element[PropertySymbol.namespaceURI] === NamespaceURI.html
+						? element[PropertySymbol.prefix]
+						: this.#getElementPrefix(element, namespacePrefixes);
+				const tagName = `${elementPrefix ? elementPrefix + ':' : ''}${localName}`;
+				const defaultNamespace = elementPrefix
+					? inheritedDefaultNamespace
+					: element[PropertySymbol.namespaceURI] || inheritedDefaultNamespace;
+				const attributes = this.#getAttributes(
+					element,
+					elementPrefix,
+					inheritedDefaultNamespace,
+					inheritedNamespacePrefixes
+				);
 
 				const childNodes =
-					localName === 'template'
+					defaultNamespace === NamespaceURI.html && localName === 'template'
 						? (<DocumentFragment>(<HTMLTemplateElement>root).content)[PropertySymbol.nodeArray]
 						: (<DocumentFragment>root)[PropertySymbol.nodeArray];
 
 				for (const node of childNodes) {
-					innerHTML += this.serializeToString(node);
+					innerHTML += this.#serializeToString(node, defaultNamespace, namespacePrefixes);
+				}
+
+				if (
+					!innerHTML &&
+					defaultNamespace === NamespaceURI.html &&
+					HTMLElementConfig[localName.toLowerCase()]?.contentModel ===
+						HTMLElementConfigContentModelEnum.noDescendants
+				) {
+					return `<${tagName}${attributes} />`;
+				}
+
+				if (!innerHTML && defaultNamespace !== NamespaceURI.html) {
+					return `<${tagName}${attributes}/>`;
 				}
 
-				return `<${localName}${this.getAttributes(element)}>${innerHTML}</${localName}>`;
+				return `<${tagName}${attributes}>${innerHTML}</${tagName}>`;
 			case Node.DOCUMENT_FRAGMENT_NODE:
 			case Node.DOCUMENT_NODE:
 				let html = '';
+				if (root[PropertySymbol.xmlProcessingInstruction]) {
+					html += this.#serializeToString(
+						root[PropertySymbol.xmlProcessingInstruction],
+						inheritedDefaultNamespace,
+						new Map(inheritedNamespacePrefixes)
+					);
+				}
 				for (const node of (<Node>root)[PropertySymbol.nodeArray]) {
-					html += this.serializeToString(node);
+					html += this.#serializeToString(
+						node,
+						inheritedDefaultNamespace,
+						new Map(inheritedNamespacePrefixes)
+					);
 				}
 				return html;
 			case NodeTypeEnum.commentNode:
 				return `<!--${root.textContent}-->`;
 			case NodeTypeEnum.processingInstructionNode:
-				// TODO: Add support for processing instructions.
-				return `<!--?${(<ProcessingInstruction>root).target} ${root.textContent}?-->`;
+				return `<?${(<ProcessingInstruction>root).target} ${root.textContent}?>`;
 			case NodeTypeEnum.textNode:
 				const parentElement = root.parentElement;
 				if (parentElement) {
@@ -94,7 +116,7 @@ export default class XMLSerializer {
 						return root.textContent;
 					}
 				}
-				return Entities.escapeText(root.textContent);
+				return XMLEncodeUtility.encodeTextContent(root.textContent);
 			case NodeTypeEnum.documentTypeNode:
 				const doctype = <DocumentType>root;
 				const identifier = doctype.publicId ? ' PUBLIC' : doctype.systemId ? ' SYSTEM' : '';
@@ -106,29 +128,153 @@ export default class XMLSerializer {
 		return '';
 	}
 
+	/**
+	 * Returns namespace prefixes.
+	 *
+	 * @param element Element.
+	 * @param inheritedNamespacePrefixes Inherited namespace prefixes.
+	 * @returns Namespace prefixes.
+	 */
+	#getNamespacePrefixes(
+		element: Element,
+		inheritedNamespacePrefixes: Map<string, string> | null
+	): Map<string, string> | null {
+		const namespacePrefixes = new Map<string, string>(inheritedNamespacePrefixes);
+		const namedItems = (<Element>element)[PropertySymbol.attributes][PropertySymbol.namedItems];
+
+		for (const attributes of namedItems.values()) {
+			if (
+				attributes[0][PropertySymbol.namespaceURI] === NamespaceURI.xmlns &&
+				attributes[0][PropertySymbol.prefix]
+			) {
+				namespacePrefixes.set(
+					attributes[0][PropertySymbol.value],
+					attributes[0][PropertySymbol.localName]
+				);
+			}
+		}
+
+		return namespacePrefixes;
+	}
+
+	/**
+	 * Returns namespace prefixes.
+	 *
+	 * @param element Element.
+	 * @param namespacePrefixes Inherited namespace prefixes.
+	 * @returns Element prefix.
+	 */
+	#getElementPrefix(
+		element: Element,
+		namespacePrefixes: Map<string, string> | null
+	): string | null {
+		if (element[PropertySymbol.prefix] && !element[PropertySymbol.namespaceURI]) {
+			throw new Error('Element has a prefix but no namespace.');
+		}
+
+		if (!element[PropertySymbol.prefix]) {
+			return null;
+		}
+
+		const elementPrefix = namespacePrefixes.get(element[PropertySymbol.namespaceURI]);
+
+		if (elementPrefix) {
+			return elementPrefix;
+		}
+
+		const existingPrefixes = new Set(namespacePrefixes.values());
+
+		if (existingPrefixes.has(element[PropertySymbol.prefix])) {
+			let i = 1;
+			while (existingPrefixes.has('n' + i)) {
+				i++;
+			}
+			namespacePrefixes.set(element[PropertySymbol.namespaceURI], 'n' + i);
+			return 'n' + i;
+		}
+
+		namespacePrefixes.set(element[PropertySymbol.namespaceURI], element[PropertySymbol.prefix]);
+
+		return element[PropertySymbol.prefix];
+	}
+
 	/**
 	 * Returns attributes as a string.
 	 *
 	 * @param element Element.
+	 * @param elementPrefix Element prefix.
+	 * @param inheritedDefaultNamespace Inherited default namespace.
+	 * @param inheritedNamespacePrefixes Inherited namespace prefixes.
 	 * @returns Attributes.
 	 */
-	private getAttributes(element: Element): string {
+	#getAttributes(
+		element: Element,
+		elementPrefix: string | null,
+		inheritedDefaultNamespace: string | null,
+		inheritedNamespacePrefixes: Map<string, string> | null
+	): string {
 		let attributeString = '';
+		let namespaceString = '';
 
-		if (
-			!(<Element>element)[PropertySymbol.attributes].getNamedItem('is') &&
-			(<Element>element)[PropertySymbol.isValue]
-		) {
-			attributeString += ' is="' + (<Element>element)[PropertySymbol.isValue] + '"';
+		const namedItems = (<Element>element)[PropertySymbol.attributes][PropertySymbol.namedItems];
+		const handledNamespaces = new Set();
+
+		for (const attributes of namedItems.values()) {
+			const attribute = attributes[0];
+
+			// Namespace attributes should be in the beginning of the string.
+			if (attribute[PropertySymbol.namespaceURI] === NamespaceURI.xmlns) {
+				if (
+					elementPrefix &&
+					attribute[PropertySymbol.localName] === elementPrefix &&
+					element[PropertySymbol.namespaceURI]
+				) {
+					namespaceString += ` xmlns:${elementPrefix}="${XMLEncodeUtility.encodeAttributeValue(
+						element[PropertySymbol.namespaceURI]
+					)}"`;
+					handledNamespaces.add(element[PropertySymbol.namespaceURI]);
+				} else if (
+					!elementPrefix &&
+					attribute[PropertySymbol.name] === 'xmlns' &&
+					element[PropertySymbol.namespaceURI]
+				) {
+					namespaceString += ` xmlns="${XMLEncodeUtility.encodeAttributeValue(
+						element[PropertySymbol.namespaceURI]
+					)}"`;
+					handledNamespaces.add(element[PropertySymbol.namespaceURI]);
+				} else {
+					namespaceString += ` ${
+						attribute[PropertySymbol.name]
+					}="${XMLEncodeUtility.encodeAttributeValue(attribute[PropertySymbol.value])}"`;
+					handledNamespaces.add(attribute[PropertySymbol.value]);
+				}
+			} else {
+				attributeString += ` ${
+					attribute[PropertySymbol.name]
+				}="${XMLEncodeUtility.encodeAttributeValue(attribute[PropertySymbol.value])}"`;
+			}
 		}
 
-		for (const attribute of (<Element>element)[PropertySymbol.attributes][
-			PropertySymbol.namedItems
-		].values()) {
-			const escapedValue = Entities.escapeAttribute(attribute[PropertySymbol.value]);
-			attributeString += ' ' + attribute[PropertySymbol.name] + '="' + escapedValue + '"';
+		// We should add the namespace as an attribute if it has not been added yet.
+		if (
+			element[PropertySymbol.namespaceURI] &&
+			inheritedDefaultNamespace !== element[PropertySymbol.namespaceURI] &&
+			!handledNamespaces.has(element[PropertySymbol.namespaceURI])
+		) {
+			if (elementPrefix && !inheritedNamespacePrefixes.has(element[PropertySymbol.namespaceURI])) {
+				namespaceString += ` xmlns:${elementPrefix}="${XMLEncodeUtility.encodeAttributeValue(
+					element[PropertySymbol.namespaceURI]
+				)}"`;
+			} else if (
+				!elementPrefix &&
+				inheritedDefaultNamespace !== element[PropertySymbol.namespaceURI]
+			) {
+				namespaceString += ` xmlns="${XMLEncodeUtility.encodeAttributeValue(
+					element[PropertySymbol.namespaceURI]
+				)}"`;
+			}
 		}
 
-		return attributeString;
+		return namespaceString + attributeString;
 	}
 }
diff --git a/packages/happy-dom/test/CustomElement.ts b/packages/happy-dom/test/CustomElement.ts
index 9dc44d4e2..ea110b3a0 100644
--- a/packages/happy-dom/test/CustomElement.ts
+++ b/packages/happy-dom/test/CustomElement.ts
@@ -13,6 +13,7 @@ export default class CustomElement extends HTMLElement {
 		oldValue: string | null;
 		newValue: string | null;
 	}> = [];
+	public isDisconnected = false;
 	private internalShadowRoot: ShadowRoot;
 
 	/**
@@ -79,4 +80,11 @@ export default class CustomElement extends HTMLElement {
             </div>
         `;
 	}
+
+	/**
+	 * @override
+	 */
+	public disconnectedCallback(): void {
+		this.isDisconnected = true;
+	}
 }
diff --git a/packages/happy-dom/test/custom-element/CustomElementRegistry.test.ts b/packages/happy-dom/test/custom-element/CustomElementRegistry.test.ts
index 3f3b81cac..5addcaa26 100644
--- a/packages/happy-dom/test/custom-element/CustomElementRegistry.test.ts
+++ b/packages/happy-dom/test/custom-element/CustomElementRegistry.test.ts
@@ -6,6 +6,7 @@ import DOMException from '../../src/exception/DOMException.js';
 import { beforeEach, describe, it, expect } from 'vitest';
 import * as PropertySymbol from '../../src/PropertySymbol.js';
 import NamespaceURI from '../../src/config/NamespaceURI.js';
+import ICustomElementDefinition from '../../src/custom-element/ICustomElementDefinition.js';
 
 describe('CustomElementRegistry', () => {
 	let customElements;
@@ -34,7 +35,7 @@ describe('CustomElementRegistry', () => {
 				extends: 'ul'
 			});
 			expect(customElements.get('custom-element')).toBe(CustomElement);
-			expect(customElements[PropertySymbol.registry]['custom-element'].extends).toBe('ul');
+			expect(customElements[PropertySymbol.registry].get('custom-element').extends).toBe('ul');
 		});
 
 		it('Can construct CustomElement instance using "new".', () => {
@@ -95,10 +96,28 @@ describe('CustomElementRegistry', () => {
 			});
 		}
 
-		it('Calls observed attributes and set "[PropertySymbol.observedAttributes]" as a property on the element class.', () => {
+		it('Calls observed attributes only once and stores a defintion in the registry.', () => {
 			customElements.define('custom-element', CustomElement);
 			expect(CustomElement.observedAttributesCallCount).toBe(1);
-			expect(CustomElement[PropertySymbol.observedAttributes]).toEqual(['key1', 'key2']);
+
+			const definition = <ICustomElementDefinition>(
+				customElements[PropertySymbol.registry].get('custom-element')
+			);
+			const observedAttributes: string[] = [];
+
+			for (const attribute of definition.observedAttributes.values()) {
+				observedAttributes.push(attribute);
+			}
+
+			expect(observedAttributes).toEqual(['key1', 'key2']);
+
+			const element = new CustomElement();
+
+			expect(definition.livecycleCallbacks.connectedCallback).toBe(element.connectedCallback);
+			expect(definition.livecycleCallbacks.disconnectedCallback).toBe(element.disconnectedCallback);
+			expect(definition.livecycleCallbacks.attributeChangedCallback).toBe(
+				element.attributeChangedCallback
+			);
 		});
 
 		it('Non-ASCII capital letter in localName.', () => {
diff --git a/packages/happy-dom/test/dom-parser/DOMParser.test.ts b/packages/happy-dom/test/dom-parser/DOMParser.test.ts
index 027bc832f..0d81af6f6 100644
--- a/packages/happy-dom/test/dom-parser/DOMParser.test.ts
+++ b/packages/happy-dom/test/dom-parser/DOMParser.test.ts
@@ -1,13 +1,16 @@
 import Window from '../../src/window/Window.js';
-import XMLSerializer from '../../src/xml-serializer/XMLSerializer.js';
+import HTMLSerializer from '../../src/html-serializer/HTMLSerializer.js';
 import DOMParser from '../../src/dom-parser/DOMParser.js';
 import DOMParserHTML from './data/DOMParserHTML.js';
 import { beforeEach, describe, it, expect } from 'vitest';
-import DOMParserSVG from './data/DOMParserSVG';
+import XMLSerializer from '../../src/xml-serializer/XMLSerializer.js';
+import HTMLElement from '../../src/nodes/html-element/HTMLElement.js';
+import Document from '../../src/nodes/document/Document.js';
 
 describe('DOMParser', () => {
 	let domParser: DOMParser;
 	let window: Window;
+	let document: Document;
 
 	beforeEach(() => {
 		window = new Window({
@@ -18,20 +21,21 @@ describe('DOMParser', () => {
 				enableFileSystemHttpRequests: false
 			}
 		});
+		document = window.document;
 		domParser = new window.DOMParser();
 	});
 
 	describe('parseFromString()', () => {
 		it('Parses HTML of a page and returns a new document.', () => {
 			const newDocument = domParser.parseFromString(DOMParserHTML, 'text/html');
-			expect(new XMLSerializer().serializeToString(newDocument).replace(/[\s]/gm, '')).toBe(
+			expect(new HTMLSerializer().serializeToString(newDocument).replace(/[\s]/gm, '')).toBe(
 				DOMParserHTML.replace(/[\s]/gm, '')
 			);
 		});
 
 		it('Parses HTML with just a string and returns a new document with <html>, <head> and <body> tags.', () => {
 			const newDocument = domParser.parseFromString('Test', 'text/html');
-			expect(new XMLSerializer().serializeToString(newDocument)).toBe(
+			expect(new HTMLSerializer().serializeToString(newDocument)).toBe(
 				'<html><head></head><body>Test</body></html>'
 			);
 		});
@@ -51,18 +55,16 @@ describe('DOMParser', () => {
 			`,
 				'text/html'
 			);
-			expect(new XMLSerializer().serializeToString(newDocument).replace(/[\s]/gm, '')).toBe(
-				`
-				<html>
-					<head>
+			expect(new HTMLSerializer().serializeToString(newDocument)).toBe(
+				`<html><head>
 						<title>Title</title>
 					</head>
 					<body>
 						<span>Body</span>
-						<div>Should be added to body</div>
-					</body>
-				</html>
-				`.replace(/[\s]/gm, '')
+					
+				
+				<div>Should be added to body</div>
+			</body></html>`
 			);
 		});
 
@@ -78,14 +80,13 @@ describe('DOMParser', () => {
 				'text/html'
 			);
 			// Spurious comment `<!--[a-z]/,end:/-->` should be solved
-			expect(new XMLSerializer().serializeToString(newDocument).replace(/\s/g, '')).toBe(
-				`<html>
-					<body>
+			expect(new HTMLSerializer().serializeToString(newDocument)).toBe(
+				`<html><head></head><body>
 						<script>
 							var test = {className:"meta",begin:/<![a-z]/,end:/>/,contains:[t,i,l,c]};
 						</script>
-					</body>
-				</html>`.replace(/\s/g, '')
+					
+				</body></html>`
 			);
 		});
 
@@ -94,15 +95,182 @@ describe('DOMParser', () => {
 				'<p>here is some</p> html el&#225;stica ',
 				'text/html'
 			);
-			// Spurious comment `<!--[a-z]/,end:/-->` should be solved
 			expect(newDocument.body.textContent).toBe('here is some html elástica ');
 		});
 
-		it('parses SVGs', () => {
-			const newDocument = domParser.parseFromString(DOMParserSVG, 'image/svg+xml');
-			expect(new XMLSerializer().serializeToString(newDocument).replace(/[\s]/gm, '')).toBe(
-				DOMParserSVG.replace(/[\s]/gm, '')
+		it('Parses SVGs', () => {
+			const newDocument = domParser.parseFromString(
+				`
+                    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M14 6.53333V7.46667H7.46667V14H6.53333V7.46667H0V6.53333H6.53333V0H7.46667V6.53333H14Z" fill="#0078D4"></path>
+                    </svg>
+                `,
+				'image/svg+xml'
+			);
+			expect(new XMLSerializer().serializeToString(newDocument))
+				.toBe(`<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
+                        <path d="M14 6.53333V7.46667H7.46667V14H6.53333V7.46667H0V6.53333H6.53333V0H7.46667V6.53333H14Z" fill="#0078D4"/>
+                    </svg>`);
+			expect(newDocument.documentElement).toBe(newDocument.childNodes[0]);
+		});
+
+		it('Parses body', () => {
+			const newDocument = domParser.parseFromString(
+				'<body><example></example>Example Text</body>',
+				'text/html'
+			);
+			expect(newDocument.body.innerHTML).toBe('<example></example>Example Text');
+		});
+
+		it('Parses basic XML', () => {
+			const newDocument = domParser.parseFromString(
+				`<?xml version="1.0" encoding="UTF-8"?>
+                <breakfast_menu>
+                    <food>
+                        <name>Belgian Waffles</name>
+                        <price>$5.95</price>
+                        <description>Two of our famous Belgian Waffles with plenty of real maple syrup</description>
+                        <calories>650</calories>
+                    </food>
+                    <food>
+                        <name>Strawberry Belgian Waffles</name>
+                        <price>$7.95</price>
+                        <description>Light Belgian waffles covered with strawberries and whipped cream</description>
+                        <calories>900</calories>
+                    </food>
+                </breakfast_menu>
+                `,
+				'application/xml'
+			);
+			expect(new HTMLSerializer().serializeToString(newDocument)).toBe(`<breakfast_menu>
+                    <food>
+                        <name>Belgian Waffles</name>
+                        <price>$5.95</price>
+                        <description>Two of our famous Belgian Waffles with plenty of real maple syrup</description>
+                        <calories>650</calories>
+                    </food>
+                    <food>
+                        <name>Strawberry Belgian Waffles</name>
+                        <price>$7.95</price>
+                        <description>Light Belgian waffles covered with strawberries and whipped cream</description>
+                        <calories>900</calories>
+                    </food>
+                </breakfast_menu>`);
+		});
+
+		it('Parses XML with style tags', () => {
+			const newDocument = domParser.parseFromString(
+				`<?xml version="1.0" encoding="UTF-8"?>
+                <!DOCTYPE start SYSTEM "http://xml.start.com/pub/start.dtd">
+                <start>
+                <div style="--en-clipped-content:fullPage; --en-clipped-source-url:https://l3pro.netlify.app/; --en-clipped-source-title:https://l3pro.netlify.app/;">
+                <div><br></br></div><div style="; font-size: 16px; display:inline-block; min-width: 100%; position: relative;"> <span><div>
+                <div>
+                    <h1 title="H1 " style="text-align:center;color:#006600;text-decoration:underline;"> This is a test </h1>
+                    <h2></h2>
+
+                    <p title="P " style="color:#660000;font-family:sans-serif;">This has some dynamic generated content</p>
+                    <p title="P " style="color:#660000;font-family:sans-serif;">This should be enought to test</p>
+                    <hr></hr>
+
+                    <p title="P " style="color:#660000;font-family:sans-serif;">Absolute paths</p>
+                    <img src="https://l3pro.netlify.app/celes.jpeg" width="50" height="100"></img>
+                    <img src="https://l3pro.netlify.app/img/guitar.jpeg" width="50" height="100"></img>
+                        <img src="https://l3pro.netlify.app/img/mk2.jpg" width="50" height="100"></img>
+                            <img src="https://l3pro.netlify.app/img/yo.png" width="50" height="100"></img>
+
+                <p title="P " style="color:#660000;font-family:sans-serif;">Relative paths</p>
+                    <img src="celes.jpeg" width="50" height="100"></img>
+                    <img src="img/guitar.jpeg" width="50" height="100"></img>
+                    <img src="img/mk2.jpg" width="50" height="100"></img>
+                                <img src="img/yo.png" width="50" height="100"></img>
+
+
+                    
+                
+
+                </div></div></span></div>
+                </div>
+                </start>`,
+				'application/xml'
+			);
+
+			expect(newDocument.defaultView).toBe(window);
+
+			expect(new XMLSerializer().serializeToString(newDocument))
+				.toBe(`<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE start SYSTEM "http://xml.start.com/pub/start.dtd"><start>
+                <div style="--en-clipped-content:fullPage; --en-clipped-source-url:https://l3pro.netlify.app/; --en-clipped-source-title:https://l3pro.netlify.app/;">
+                <div><br/></div><div style="; font-size: 16px; display:inline-block; min-width: 100%; position: relative;"> <span><div>
+                <div>
+                    <h1 title="H1 " style="text-align:center;color:#006600;text-decoration:underline;"> This is a test </h1>
+                    <h2/>
+
+                    <p title="P " style="color:#660000;font-family:sans-serif;">This has some dynamic generated content</p>
+                    <p title="P " style="color:#660000;font-family:sans-serif;">This should be enought to test</p>
+                    <hr/>
+
+                    <p title="P " style="color:#660000;font-family:sans-serif;">Absolute paths</p>
+                    <img src="https://l3pro.netlify.app/celes.jpeg" width="50" height="100"/>
+                    <img src="https://l3pro.netlify.app/img/guitar.jpeg" width="50" height="100"/>
+                        <img src="https://l3pro.netlify.app/img/mk2.jpg" width="50" height="100"/>
+                            <img src="https://l3pro.netlify.app/img/yo.png" width="50" height="100"/>
+
+                <p title="P " style="color:#660000;font-family:sans-serif;">Relative paths</p>
+                    <img src="celes.jpeg" width="50" height="100"/>
+                    <img src="img/guitar.jpeg" width="50" height="100"/>
+                    <img src="img/mk2.jpg" width="50" height="100"/>
+                                <img src="img/yo.png" width="50" height="100"/>
+
+
+                    
+                
+
+                </div></div></span></div>
+                </div>
+                </start>`);
+		});
+
+		it('Does not call connectedCallback on custom elements as they are not connected to the main document', () => {
+			/* eslint-disable jsdoc/require-jsdoc */
+			class CustomElement extends HTMLElement {
+				public connectedCount = 0;
+				public disconnectedCount = 0;
+
+				constructor() {
+					super();
+					this.attachShadow({ mode: 'open' });
+				}
+
+				public connectedCallback(): void {
+					this.connectedCount++;
+				}
+
+				public disconnectedCallback(): void {
+					this.disconnectedCount++;
+				}
+			}
+
+			window.customElements.define('custom-element', CustomElement);
+
+			/* eslint-enable jsdoc/require-jsdoc */
+
+			const newDocument = domParser.parseFromString(
+				'<custom-element></custom-element>',
+				'text/html'
 			);
+
+			expect(newDocument.isConnected).toBe(false);
+			expect(newDocument.defaultView).toBe(window);
+
+			const customElement = <CustomElement>newDocument.querySelector('custom-element');
+
+			expect(customElement.connectedCount).toBe(0);
+			expect(customElement.disconnectedCount).toBe(0);
+
+			document.body.appendChild(customElement);
+
+			expect(customElement.connectedCount).toBe(1);
+			expect(customElement.disconnectedCount).toBe(0);
 		});
 	});
 });
diff --git a/packages/happy-dom/test/html-parser/HTMLParser.test.ts b/packages/happy-dom/test/html-parser/HTMLParser.test.ts
new file mode 100644
index 000000000..a6b3e7d58
--- /dev/null
+++ b/packages/happy-dom/test/html-parser/HTMLParser.test.ts
@@ -0,0 +1,2108 @@
+import HTMLParser from '../../src/html-parser/HTMLParser.js';
+import Window from '../../src/window/Window.js';
+import Document from '../../src/nodes/document/Document.js';
+import Node from '../../src/nodes/node/Node.js';
+import HTMLElement from '../../src/nodes/html-element/HTMLElement.js';
+import NamespaceURI from '../../src/config/NamespaceURI.js';
+import DocumentType from '../../src/nodes/document-type/DocumentType.js';
+import HTMLSerializer from '../../src/html-serializer/HTMLSerializer.js';
+import HTMLTemplateElement from '../../src/nodes/html-template-element/HTMLTemplateElement.js';
+import NodeTypeEnum from '../../src/nodes/node/NodeTypeEnum.js';
+import { beforeEach, describe, it, expect } from 'vitest';
+import CustomElement from '../CustomElement.js';
+import HTMLHtmlElement from '../../src/nodes/html-html-element/HTMLHtmlElement.js';
+import XMLSerializer from '../../src/xml-serializer/XMLSerializer.js';
+import TreeWalkerHTML from '../tree-walker/data/TreeWalkerHTML.js';
+
+describe('HTMLParser', () => {
+	let window: Window;
+	let document: Document;
+
+	beforeEach(() => {
+		window = new Window();
+		document = window.document;
+	});
+
+	describe('parse()', () => {
+		it('Parses HTML with a single <div>.', () => {
+			const result = new HTMLParser(window).parse('<div></div>');
+			expect(result.childNodes.length).toBe(1);
+			expect(result.childNodes[0].childNodes.length).toBe(0);
+			expect((<HTMLElement>result.childNodes[0]).tagName).toBe('DIV');
+		});
+
+		it('Parses HTML with a single <div> with attributes.', () => {
+			const result = new HTMLParser(window).parse(
+				'<div class="class1 class2" id="id" data-no-value></div>'
+			);
+			expect(result.childNodes.length).toBe(1);
+			expect(result.childNodes[0].childNodes.length).toBe(0);
+			expect((<HTMLElement>result.childNodes[0]).tagName).toBe('DIV');
+			expect((<HTMLElement>result.childNodes[0]).id).toBe('id');
+			expect((<HTMLElement>result.childNodes[0]).className).toBe('class1 class2');
+
+			expect((<HTMLElement>result.childNodes[0]).attributes.length).toBe(3);
+
+			expect((<HTMLElement>result.childNodes[0]).attributes[0].name).toBe('class');
+			expect((<HTMLElement>result.childNodes[0]).attributes[0].value).toBe('class1 class2');
+			expect((<HTMLElement>result.childNodes[0]).attributes[0].namespaceURI).toBe(null);
+			expect((<HTMLElement>result.childNodes[0]).attributes[0].specified).toBe(true);
+			expect(
+				(<HTMLElement>result.childNodes[0]).attributes[0].ownerElement === result.childNodes[0]
+			).toBe(true);
+			expect((<HTMLElement>result.childNodes[0]).attributes[0].ownerDocument === document).toBe(
+				true
+			);
+
+			expect((<HTMLElement>result.childNodes[0]).attributes[1].name).toBe('id');
+			expect((<HTMLElement>result.childNodes[0]).attributes[1].value).toBe('id');
+			expect((<HTMLElement>result.childNodes[0]).attributes[1].namespaceURI).toBe(null);
+			expect((<HTMLElement>result.childNodes[0]).attributes[1].specified).toBe(true);
+			expect(
+				(<HTMLElement>result.childNodes[0]).attributes[1].ownerElement === result.childNodes[0]
+			).toBe(true);
+			expect((<HTMLElement>result.childNodes[0]).attributes[1].ownerDocument === document).toBe(
+				true
+			);
+
+			expect((<HTMLElement>result.childNodes[0]).attributes[2].name).toBe('data-no-value');
+			expect((<HTMLElement>result.childNodes[0]).attributes[2].value).toBe('');
+			expect((<HTMLElement>result.childNodes[0]).attributes[2].namespaceURI).toBe(null);
+			expect((<HTMLElement>result.childNodes[0]).attributes[2].specified).toBe(true);
+			expect(
+				(<HTMLElement>result.childNodes[0]).attributes[2].ownerElement === result.childNodes[0]
+			).toBe(true);
+			expect((<HTMLElement>result.childNodes[0]).attributes[2].ownerDocument === document).toBe(
+				true
+			);
+
+			expect((<HTMLElement>result.childNodes[0]).attributes['class'].name).toBe('class');
+			expect((<HTMLElement>result.childNodes[0]).attributes['class'].value).toBe('class1 class2');
+			expect((<HTMLElement>result.childNodes[0]).attributes['class'].namespaceURI).toBe(null);
+			expect((<HTMLElement>result.childNodes[0]).attributes['class'].specified).toBe(true);
+			expect(
+				(<HTMLElement>result.childNodes[0]).attributes['class'].ownerElement ===
+					result.childNodes[0]
+			).toBe(true);
+			expect(
+				(<HTMLElement>result.childNodes[0]).attributes['class'].ownerDocument === document
+			).toBe(true);
+
+			expect((<HTMLElement>result.childNodes[0]).attributes['id'].name).toBe('id');
+			expect((<HTMLElement>result.childNodes[0]).attributes['id'].value).toBe('id');
+			expect((<HTMLElement>result.childNodes[0]).attributes['id'].namespaceURI).toBe(null);
+			expect((<HTMLElement>result.childNodes[0]).attributes['id'].specified).toBe(true);
+			expect(
+				(<HTMLElement>result.childNodes[0]).attributes['id'].ownerElement === result.childNodes[0]
+			).toBe(true);
+			expect((<HTMLElement>result.childNodes[0]).attributes['id'].ownerDocument === document).toBe(
+				true
+			);
+
+			expect((<HTMLElement>result.childNodes[0]).attributes['data-no-value'].name).toBe(
+				'data-no-value'
+			);
+			expect((<HTMLElement>result.childNodes[0]).attributes['data-no-value'].value).toBe('');
+			expect((<HTMLElement>result.childNodes[0]).attributes['data-no-value'].namespaceURI).toBe(
+				null
+			);
+			expect((<HTMLElement>result.childNodes[0]).attributes['data-no-value'].specified).toBe(true);
+			expect(
+				(<HTMLElement>result.childNodes[0]).attributes['data-no-value'].ownerElement ===
+					result.childNodes[0]
+			).toBe(true);
+			expect(
+				(<HTMLElement>result.childNodes[0]).attributes['data-no-value'].ownerDocument === document
+			).toBe(true);
+		});
+
+		it('Parses an entire HTML page.', () => {
+			const html = `
+	<!DOCTYPE html>
+	<html>
+		<head>
+			<title>Title</title>
+		</head>
+		<body>
+			<div class="class1 class2" id="id">
+				<!--Comment 1!-->
+				<?processing instruction?>
+				<?processing-instruction>
+				<!Exclamation mark comment>
+				<b>Bold</b>
+				<!-- Comment 2 !-->
+				<span>Span</span>
+                <!>
+			</div>
+			<article class="class1 class2" id="id">
+				<!-- Comment 1 !-->
+				<b>Bold</b>
+				<!-- Comment 2 !-->
+			</article>
+			<img>
+			<img />
+		</body>
+	</html>
+`;
+			const expected = `<!DOCTYPE html><html><head>
+			<title>Title</title>
+		</head>
+		<body>
+			<div class="class1 class2" id="id">
+				<!--Comment 1!-->
+				<!--?processing instruction?-->
+				<!--?processing-instruction-->
+				<!--Exclamation mark comment-->
+				<b>Bold</b>
+				<!-- Comment 2 !-->
+				<span>Span</span>
+                <!---->
+			</div>
+			<article class="class1 class2" id="id">
+				<!-- Comment 1 !-->
+				<b>Bold</b>
+				<!-- Comment 2 !-->
+			</article>
+			<img>
+			<img>
+		
+	
+</body></html>`;
+			const result = <Document>(
+				new HTMLParser(window).parse(html, document.implementation.createHTMLDocument())
+			);
+			expect(result.childNodes[0].ownerDocument).toBe(result);
+			expect(result.childNodes[1].ownerDocument).toBe(result);
+			expect(result.body.children[0].childNodes[0].ownerDocument).toBe(result);
+			expect(result.body.children[0].childNodes[1].ownerDocument).toBe(result);
+			expect(result.body.children[0].childNodes[2].ownerDocument).toBe(result);
+			expect(result.body.children[0].childNodes[3].ownerDocument).toBe(result);
+			expect(result.body.children[0].childNodes[4].ownerDocument).toBe(result);
+			expect(result.body.children[0].childNodes[5].ownerDocument).toBe(result);
+			expect(result.body.children[0].childNodes[6].ownerDocument).toBe(result);
+			expect(result.body.children[0].childNodes[7].ownerDocument).toBe(result);
+			expect(result.body.children[0].childNodes[8].ownerDocument).toBe(result);
+
+			expect(new HTMLSerializer().serializeToString(result)).toBe(expected);
+		});
+
+		it('Parses a page with document type set to "HTML 4.01".', () => {
+			const html = `
+	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+	<html>
+		<head>
+			<title>Title</title>
+		</head>
+		<body>
+			<div class="class1 class2" id="id">
+				<!--Comment 1!-->
+				<?processing instruction?>
+				<?processing-instruction>
+				<!Exclamation mark comment>
+				<b>Bold</b>
+				<!-- Comment 2 !-->
+				<span>Span</span>
+                <!>
+			</div>
+			<article class="class1 class2" id="id">
+				<!-- Comment 1 !-->
+				<b>Bold</b>
+				<!-- Comment 2 !-->
+			</article>
+			<img>
+			<img />
+		</body>
+	</html>
+`;
+			const expected = `<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head>
+			<title>Title</title>
+		</head>
+		<body>
+			<div class="class1 class2" id="id">
+				<!--Comment 1!-->
+				<!--?processing instruction?-->
+				<!--?processing-instruction-->
+				<!--Exclamation mark comment-->
+				<b>Bold</b>
+				<!-- Comment 2 !-->
+				<span>Span</span>
+                <!---->
+			</div>
+			<article class="class1 class2" id="id">
+				<!-- Comment 1 !-->
+				<b>Bold</b>
+				<!-- Comment 2 !-->
+			</article>
+			<img>
+			<img>
+		
+	
+</body></html>`;
+
+			const result = new HTMLParser(window).parse(
+				html,
+				document.implementation.createHTMLDocument()
+			);
+			const doctype = <DocumentType>result.childNodes[0];
+			expect(doctype.name).toBe('html');
+			expect(doctype.publicId).toBe('-//W3C//DTD HTML 4.01//EN');
+			expect(doctype.systemId).toBe('http://www.w3.org/TR/html4/strict.dtd');
+			expect(new HTMLSerializer().serializeToString(result)).toBe(expected);
+		});
+
+		it('Handles unnestable elements correctly when there are siblings.', () => {
+			const result = new HTMLParser(window).parse(
+				`<article>
+                    <span>
+                        <div>
+                            <a><a>Test</a></a>
+                        </div>
+                    </span>
+                    <b>Test</b>
+                </article>`
+			);
+			expect(new HTMLSerializer().serializeToString(result).replace(/\s/gm, '')).toBe(
+				`
+                <article>
+                    <span>
+                        <div>
+                            <a></a><a>Test</a>
+                        </div>
+                    </span>
+                    <b>Test</b>
+                </article>
+            `.replace(/\s/gm, '')
+			);
+		});
+
+		it('Handles unnestable elements correctly when the nested element is wrapped by another element.', () => {
+			const result = new HTMLParser(window).parse(
+				`<article>
+                    <span>
+                        <div>
+                            <a><span><a>Test</a></span></a>
+                        </div>
+                    </span>
+                    <b>Test</b>
+                </article>`
+			);
+			expect(new HTMLSerializer().serializeToString(result).replace(/\s/gm, '')).toBe(
+				`
+                <article>
+                    <span>
+                        <div>
+                            <a><span></span></a><a>Test</a>
+                        </div>
+                    </span>
+                    <b>Test</b>
+                </article>
+            `.replace(/\s/gm, '')
+			);
+		});
+
+		it('Parses a page with document type set to "MathML 1.01".', () => {
+			const html = `<!DOCTYPE math SYSTEM "http://www.w3.org/Math/DTD/mathml1/mathml.dtd">
+<html>
+    <head>
+        <title>Title</title>
+    </head>
+    <body>
+        <div class="class1 class2" id="id">
+            <!--Comment 1!-->
+            <?processing instruction?>
+            <?processing-instruction>
+            <!Exclamation mark comment>
+            <b>Bold</b>
+            <!-- Comment 2 !-->
+            <span>Span</span>
+            <!>
+        </div>
+        <article class="class1 class2" id="id">
+            <!-- Comment 1 !-->
+            <b>Bold</b>
+            <!-- Comment 2 !-->
+        </article>
+        <img>
+        <img />
+    </body>
+</html>`;
+			const expected = `<!DOCTYPE math SYSTEM "http://www.w3.org/Math/DTD/mathml1/mathml.dtd"><html><head>
+        <title>Title</title>
+    </head>
+    <body>
+        <div class="class1 class2" id="id">
+            <!--Comment 1!-->
+            <!--?processing instruction?-->
+            <!--?processing-instruction-->
+            <!--Exclamation mark comment-->
+            <b>Bold</b>
+            <!-- Comment 2 !-->
+            <span>Span</span>
+            <!---->
+        </div>
+        <article class="class1 class2" id="id">
+            <!-- Comment 1 !-->
+            <b>Bold</b>
+            <!-- Comment 2 !-->
+        </article>
+        <img>
+        <img>
+    
+</body></html>`;
+
+			const result = new HTMLParser(window).parse(
+				html,
+				document.implementation.createHTMLDocument()
+			);
+			const doctype = <DocumentType>result.childNodes[0];
+			expect(doctype.name).toBe('math');
+			expect(doctype.publicId).toBe('');
+			expect(doctype.systemId).toBe('http://www.w3.org/Math/DTD/mathml1/mathml.dtd');
+			expect(new HTMLSerializer().serializeToString(result)).toBe(expected);
+		});
+
+		it('Handles unclosed tags of unnestable elements (e.g. <a>, <li>).', () => {
+			const result = new HTMLParser(window).parse(
+				`
+				<div class="test" disabled>
+					<ul>
+						<li><a href="http://localhost:8080/test/test" target="_blank">Test</a>
+						<li><span>Test 2</span></li>
+						<li><b>Test 3</b></li>
+					</ul>
+					<a><a>Test</a></a>
+				</div>
+				`
+			);
+
+			expect(new HTMLSerializer().serializeToString(result).replace(/\s/gm, '')).toBe(
+				`
+				<div class="test" disabled="">
+					<ul>
+						<li><a href="http://localhost:8080/test/test" target="_blank">Test</a></li>
+						<li><span>Test 2</span></li>
+						<li><b>Test 3</b></li>
+					</ul>
+					<a></a><a>Test</a>
+				</div>
+				`.replace(/\s/gm, '')
+			);
+		});
+
+		it('Does not parse the content of script and style elements.', () => {
+			const result = new HTMLParser(window).parse(
+				`<div>
+					<script>if(1<Math['random']()){}else if(Math['random']()>1){console.log("1")}</script>
+					<script><b></b></script>
+					<style><b></b></style>
+				</div>`
+			);
+
+			expect((<HTMLElement>result.children[0].children[0]).innerText).toBe(
+				`if(1<Math['random']()){}else if(Math['random']()>1){console.log("1")}`
+			);
+
+			expect((<HTMLElement>result.children[0].children[1]).innerText).toBe('<b></b>');
+			expect((<HTMLElement>result.children[0].children[2]).innerText).toBe('<b></b>');
+
+			expect(new HTMLSerializer().serializeToString(result)).toBe(
+				`<div>
+					<script>if(1<Math['random']()){}else if(Math['random']()>1){console.log("1")}</script>
+					<script><b></b></script>
+					<style><b></b></style>
+				</div>`
+			);
+
+			const root2 = new HTMLParser(window).parse(
+				`<html>
+                    <head>
+                        <title>Title</title>
+                    </head>
+                    <body>
+                        <script type="text/javascript">var vars = []; for (var i=0;i<vars.length;i++) {}</script>
+                    </body>
+                </html>`,
+				document.implementation.createHTMLDocument()
+			);
+			expect((<HTMLElement>root2.children[0].children[1].children[0]).innerText).toBe(
+				'var vars = []; for (var i=0;i<vars.length;i++) {}'
+			);
+		});
+
+		it('Handles unclosed regular elements.', () => {
+			const result = new HTMLParser(window).parse(`<div>test`);
+
+			expect(result.childNodes.length).toBe(1);
+			expect((<HTMLElement>result.childNodes[0]).tagName).toBe('DIV');
+			expect(result.childNodes[0].childNodes[0].nodeType).toBe(Node.TEXT_NODE);
+		});
+
+		it('Parses an SVG with "xmlns" set to SVG.', () => {
+			const result = new HTMLParser(window).parse(
+				`
+				<div>
+					<svg viewBox="0 0 300 100" stroke="red" fill="grey" xmlns="${NamespaceURI.svg}">
+						<circle cx="50" cy="50" r="40" />
+						<circle cx="150" cy="50" r="4" />
+					
+						<svg viewBox="0 0 10 10" x="200" width="100">
+							<clippath>
+								<circle cx="5" cy="5" r="4" />
+							</clippath>
+						</svg>
+					</svg>
+				</div>
+			`
+			);
+
+			expect(new HTMLSerializer().serializeToString(result)).toBe(
+				`
+				<div>
+					<svg viewBox="0 0 300 100" stroke="red" fill="grey" xmlns="${NamespaceURI.svg}">
+						<circle cx="50" cy="50" r="40"></circle>
+						<circle cx="150" cy="50" r="4"></circle>
+					
+						<svg viewBox="0 0 10 10" x="200" width="100">
+							<clipPath>
+								<circle cx="5" cy="5" r="4"></circle>
+							</clipPath>
+						</svg>
+					</svg>
+				</div>
+			`
+			);
+
+			expect(new XMLSerializer().serializeToString(result)).toBe(
+				`
+				<div xmlns="http://www.w3.org/1999/xhtml">
+					<svg xmlns="${NamespaceURI.svg}" viewBox="0 0 300 100" stroke="red" fill="grey">
+						<circle cx="50" cy="50" r="40"/>
+						<circle cx="150" cy="50" r="4"/>
+					
+						<svg viewBox="0 0 10 10" x="200" width="100">
+							<clipPath>
+								<circle cx="5" cy="5" r="4"/>
+							</clipPath>
+						</svg>
+					</svg>
+				</div>
+			`
+			);
+
+			const div = result.children[0];
+			const svg = div.children[0];
+			const circle = svg.children[0];
+
+			expect(div.namespaceURI).toBe(NamespaceURI.html);
+			expect(svg.namespaceURI).toBe(NamespaceURI.svg);
+			expect(circle.namespaceURI).toBe(NamespaceURI.svg);
+
+			// Attributes should be in lower-case now as the namespace is HTML
+			expect(svg.attributes.length).toBe(4);
+
+			expect(svg.attributes[0].name).toBe('viewBox');
+			expect(svg.attributes[0].value).toBe('0 0 300 100');
+			expect(svg.attributes[0].namespaceURI).toBe(null);
+			expect(svg.attributes[0].specified).toBe(true);
+			expect(svg.attributes[0].ownerElement === svg).toBe(true);
+			expect(svg.attributes[0].ownerDocument === document).toBe(true);
+
+			expect(svg.attributes[1].name).toBe('stroke');
+			expect(svg.attributes[1].value).toBe('red');
+			expect(svg.attributes[1].namespaceURI).toBe(null);
+			expect(svg.attributes[1].specified).toBe(true);
+			expect(svg.attributes[1].ownerElement === svg).toBe(true);
+			expect(svg.attributes[1].ownerDocument === document).toBe(true);
+
+			expect(svg.attributes[2].name).toBe('fill');
+			expect(svg.attributes[2].value).toBe('grey');
+			expect(svg.attributes[2].namespaceURI).toBe(null);
+			expect(svg.attributes[2].specified).toBe(true);
+			expect(svg.attributes[2].ownerElement === svg).toBe(true);
+			expect(svg.attributes[2].ownerDocument === document).toBe(true);
+
+			expect(svg.attributes[3].name).toBe('xmlns');
+			expect(svg.attributes[3].value).toBe(NamespaceURI.svg);
+			expect(svg.attributes[3].namespaceURI).toBe(NamespaceURI.xmlns);
+			expect(svg.attributes[3].specified).toBe(true);
+			expect(svg.attributes[3].ownerElement === svg).toBe(true);
+			expect(svg.attributes[3].ownerDocument === document).toBe(true);
+
+			expect(svg.attributes['viewBox'].name).toBe('viewBox');
+			expect(svg.attributes['viewBox'].value).toBe('0 0 300 100');
+			expect(svg.attributes['viewBox'].namespaceURI).toBe(null);
+			expect(svg.attributes['viewBox'].specified).toBe(true);
+			expect(svg.attributes['viewBox'].ownerElement === svg).toBe(true);
+			expect(svg.attributes['viewBox'].ownerDocument === document).toBe(true);
+
+			expect(svg.attributes['stroke'].name).toBe('stroke');
+			expect(svg.attributes['stroke'].value).toBe('red');
+			expect(svg.attributes['stroke'].namespaceURI).toBe(null);
+			expect(svg.attributes['stroke'].specified).toBe(true);
+			expect(svg.attributes['stroke'].ownerElement === svg).toBe(true);
+			expect(svg.attributes['stroke'].ownerDocument === document).toBe(true);
+
+			expect(svg.attributes['fill'].name).toBe('fill');
+			expect(svg.attributes['fill'].value).toBe('grey');
+			expect(svg.attributes['fill'].namespaceURI).toBe(null);
+			expect(svg.attributes['fill'].specified).toBe(true);
+			expect(svg.attributes['fill'].ownerElement === svg).toBe(true);
+			expect(svg.attributes['fill'].ownerDocument === document).toBe(true);
+
+			expect(svg.attributes['xmlns'].name).toBe('xmlns');
+			expect(svg.attributes['xmlns'].value).toBe(NamespaceURI.svg);
+			expect(svg.attributes['xmlns'].namespaceURI).toBe(NamespaceURI.xmlns);
+			expect(svg.attributes['xmlns'].specified).toBe(true);
+			expect(svg.attributes['xmlns'].ownerElement === svg).toBe(true);
+			expect(svg.attributes['xmlns'].ownerDocument === document).toBe(true);
+		});
+
+		it('Parses an SVG with "xmlns" set to HTML.', () => {
+			const result = new HTMLParser(window).parse(
+				`
+				<div>
+					<svg viewBox="0 0 300 100" stroke="red" fill="grey" xmlns="${NamespaceURI.html}">
+						<circle cx="50" cy="50" r="40" />
+						<circle cx="150" cy="50" r="4" />
+					
+						<svg viewBox="0 0 10 10" x="200" width="100">
+							<clippath>
+								<circle cx="5" cy="5" r="4" />
+							</clippath>
+						</svg>
+					</svg>
+				</div>
+			`
+			);
+
+			expect(new HTMLSerializer().serializeToString(result)).toBe(
+				`
+				<div>
+					<svg viewBox="0 0 300 100" stroke="red" fill="grey" xmlns="${NamespaceURI.html}">
+						<circle cx="50" cy="50" r="40"></circle>
+						<circle cx="150" cy="50" r="4"></circle>
+					
+						<svg viewBox="0 0 10 10" x="200" width="100">
+							<clipPath>
+								<circle cx="5" cy="5" r="4"></circle>
+							</clipPath>
+						</svg>
+					</svg>
+				</div>
+			`
+			);
+
+			const div = result.children[0];
+			const svg = div.children[0];
+			const circle = svg.children[0];
+
+			expect(div.namespaceURI).toBe(NamespaceURI.html);
+			expect(svg.namespaceURI).toBe(NamespaceURI.svg);
+			expect(circle.namespaceURI).toBe(NamespaceURI.svg);
+
+			// Attributes should be in lower-case now as the namespace is HTML
+			expect(svg.attributes.length).toBe(4);
+
+			expect(svg.attributes[0].name).toBe('viewBox');
+			expect(svg.attributes[0].value).toBe('0 0 300 100');
+			expect(svg.attributes[0].namespaceURI).toBe(null);
+			expect(svg.attributes[0].specified).toBe(true);
+			expect(svg.attributes[0].ownerElement === svg).toBe(true);
+			expect(svg.attributes[0].ownerDocument === document).toBe(true);
+
+			expect(svg.attributes[1].name).toBe('stroke');
+			expect(svg.attributes[1].value).toBe('red');
+			expect(svg.attributes[1].namespaceURI).toBe(null);
+			expect(svg.attributes[1].specified).toBe(true);
+			expect(svg.attributes[1].ownerElement === svg).toBe(true);
+			expect(svg.attributes[1].ownerDocument === document).toBe(true);
+
+			expect(svg.attributes[2].name).toBe('fill');
+			expect(svg.attributes[2].value).toBe('grey');
+			expect(svg.attributes[2].namespaceURI).toBe(null);
+			expect(svg.attributes[2].specified).toBe(true);
+			expect(svg.attributes[2].ownerElement === svg).toBe(true);
+			expect(svg.attributes[2].ownerDocument === document).toBe(true);
+
+			expect(svg.attributes[3].name).toBe('xmlns');
+			expect(svg.attributes[3].value).toBe(NamespaceURI.html);
+			expect(svg.attributes[3].namespaceURI).toBe(NamespaceURI.xmlns);
+			expect(svg.attributes[3].specified).toBe(true);
+			expect(svg.attributes[3].ownerElement === svg).toBe(true);
+			expect(svg.attributes[3].ownerDocument === document).toBe(true);
+
+			expect(svg.attributes['viewBox'].name).toBe('viewBox');
+			expect(svg.attributes['viewBox'].value).toBe('0 0 300 100');
+			expect(svg.attributes['viewBox'].namespaceURI).toBe(null);
+			expect(svg.attributes['viewBox'].specified).toBe(true);
+			expect(svg.attributes['viewBox'].ownerElement === svg).toBe(true);
+			expect(svg.attributes['viewBox'].ownerDocument === document).toBe(true);
+
+			expect(svg.attributes['stroke'].name).toBe('stroke');
+			expect(svg.attributes['stroke'].value).toBe('red');
+			expect(svg.attributes['stroke'].namespaceURI).toBe(null);
+			expect(svg.attributes['stroke'].specified).toBe(true);
+			expect(svg.attributes['stroke'].ownerElement === svg).toBe(true);
+			expect(svg.attributes['stroke'].ownerDocument === document).toBe(true);
+
+			expect(svg.attributes['fill'].name).toBe('fill');
+			expect(svg.attributes['fill'].value).toBe('grey');
+			expect(svg.attributes['fill'].namespaceURI).toBe(null);
+			expect(svg.attributes['fill'].specified).toBe(true);
+			expect(svg.attributes['fill'].ownerElement === svg).toBe(true);
+			expect(svg.attributes['fill'].ownerDocument === document).toBe(true);
+
+			expect(svg.attributes['xmlns'].name).toBe('xmlns');
+			expect(svg.attributes['xmlns'].value).toBe(NamespaceURI.html);
+			expect(svg.attributes['xmlns'].namespaceURI).toBe(NamespaceURI.xmlns);
+			expect(svg.attributes['xmlns'].specified).toBe(true);
+			expect(svg.attributes['xmlns'].ownerElement === svg).toBe(true);
+			expect(svg.attributes['xmlns'].ownerDocument === document).toBe(true);
+		});
+
+		it('Parses a malformed SVG with "xmlns" set to HTML.', () => {
+			const result = new HTMLParser(window).parse(
+				`
+				<div>
+					<svg viewBox="0 0 300 100" stroke="red" fill="grey" xmlns="${NamespaceURI.html}">
+						<ellipse cx="50" cy="50" r="40">
+						<line cx="50" cy="50" r="40">
+						<path cx="50" cy="50" r="40">
+						<polygon cx="50" cy="50" r="40">
+						<polyline cx="50" cy="50" r="40" />
+						<rect cx="50" cy="50" r="40" />
+						<stop cx="50" cy="50" r="40" />
+						<use cx="50" cy="50" r="40" />
+						<circle cx="150" cy="50" r="4"><test></test></circle>
+                        <clippath><circle cx="5" cy="5" r="4"></clippath>
+					
+						<svg viewBox="0 0 10 10" x="200" width="100">
+							<circle cx="5" cy="5" r="4" />
+						</svg>
+					</svg>
+				</div>
+			`
+			);
+
+			expect(new HTMLSerializer().serializeToString(result)).toBe(
+				`
+				<div>
+					<svg viewBox="0 0 300 100" stroke="red" fill="grey" xmlns="http://www.w3.org/1999/xhtml">
+						<ellipse cx="50" cy="50" r="40">
+						<line cx="50" cy="50" r="40">
+						<path cx="50" cy="50" r="40">
+						<polygon cx="50" cy="50" r="40">
+						<polyline cx="50" cy="50" r="40"></polyline>
+						<rect cx="50" cy="50" r="40"></rect>
+						<stop cx="50" cy="50" r="40"></stop>
+						<use cx="50" cy="50" r="40"></use>
+						<circle cx="150" cy="50" r="4"><test></test></circle>
+                        <clipPath><circle cx="5" cy="5" r="4"></circle></clipPath>
+					
+						<svg viewBox="0 0 10 10" x="200" width="100">
+							<circle cx="5" cy="5" r="4"></circle>
+						</svg>
+					</polygon></path></line></ellipse></svg>
+				</div>
+			`
+			);
+
+			expect(new XMLSerializer().serializeToString(result)).toBe(
+				`
+				<div xmlns="http://www.w3.org/1999/xhtml">
+					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 100" stroke="red" fill="grey">
+						<ellipse cx="50" cy="50" r="40">
+						<line cx="50" cy="50" r="40">
+						<path cx="50" cy="50" r="40">
+						<polygon cx="50" cy="50" r="40">
+						<polyline cx="50" cy="50" r="40"/>
+						<rect cx="50" cy="50" r="40"/>
+						<stop cx="50" cy="50" r="40"/>
+						<use cx="50" cy="50" r="40"/>
+						<circle cx="150" cy="50" r="4"><test/></circle>
+                        <clipPath><circle cx="5" cy="5" r="4"/></clipPath>
+					
+						<svg viewBox="0 0 10 10" x="200" width="100">
+							<circle cx="5" cy="5" r="4"/>
+						</svg>
+					</polygon></path></line></ellipse></svg>
+				</div>
+			`
+			);
+		});
+
+		it('Parses childless elements with start and end tag names in different case', () => {
+			const result = new HTMLParser(window).parse(
+				`
+				<script type="text/JavaScript">console.log('hello')</SCRIPT>
+				`
+			);
+
+			expect((<HTMLElement>result.children[0]).innerText).toBe(`console.log('hello')`);
+		});
+
+		it('Handles different value types.', () => {
+			const root1 = new HTMLParser(window).parse(<string>(<unknown>null));
+			expect(new HTMLSerializer().serializeToString(root1)).toBe('null');
+
+			const root2 = new HTMLParser(window).parse(<string>(<unknown>undefined));
+			expect(new HTMLSerializer().serializeToString(root2)).toBe('undefined');
+
+			const root3 = new HTMLParser(window).parse(<string>(<unknown>1000));
+			expect(new HTMLSerializer().serializeToString(root3)).toBe('1000');
+
+			const root4 = new HTMLParser(window).parse(<string>(<unknown>false));
+			expect(new HTMLSerializer().serializeToString(root4)).toBe('false');
+		});
+
+		it('Parses conditional comments', () => {
+			const testHTML = [
+				// Conditional comment - IE 8
+				'<!--[if IE 8]>\n' + '<p>Welcome to Internet Explorer 8.</p>\n' + '<![endif]-->',
+
+				// Conditional comment - IE 7
+				'<!--[if gte IE 7]>\n' +
+					'<script>\n' +
+					'  alert("Congratulations! You are running Internet Explorer 7 or a later version of Internet Explorer.");\n' +
+					'</script>\n' +
+					'<p>Thank you for closing the message box.</p>\n' +
+					'<![endif]-->',
+
+				// Conditional comment - IE 5
+				'<!--[if IE 5]>\n' +
+					'<p>Welcome to any incremental version of Internet Explorer 5!</p>\n' +
+					'<![endif]-->',
+
+				// Conditional comment - IE 5.0000
+				'<!--[if IE 5.0000]>\n' + '<p>Welcome to Internet Explorer 5.0!</p>\n' + '<![endif]-->',
+
+				// Conditional comment - WindowsEdition 1
+				'<!--[if WindowsEdition 1]>\n' +
+					'<p>You are using Windows Ultimate Edition.</p>\n' +
+					'<![endif]-->',
+
+				// Conditional comment - Contoso 2
+				'<!--[if lt Contoso 2]>\n' +
+					'<p>Your version of the Contoso control is out of date; Please update to the latest.</p>\n' +
+					'<![endif]-->'
+			];
+
+			for (const html of testHTML) {
+				const result = new HTMLParser(window).parse(html);
+				expect(new HTMLSerializer().serializeToString(result)).toBe(html);
+			}
+		});
+
+		it('Parses conditional comments for IE 9 with multiple scripts', () => {
+			const html = `<!DOCTYPE html><html lang="en">
+                <head>
+                    <meta charset="UTF-8">
+                    <title>Title</title>
+                </head>
+                <body>
+                <!--[if lt IE 9]>
+                <script>window.location = 'browser.htm';</script>
+                <![endif]-->
+
+                <script>
+                    const node = document.createElement('a');
+                    node.href = 'http://www.google.com';
+                    node.target = '_blank';
+                    node.innerHTML = 'google';
+                    window.document.body.appendChild(node);
+                </script>
+                </body>
+            </html>`;
+
+			const expected = `<!DOCTYPE html><html lang="en"><head>
+                    <meta charset="UTF-8">
+                    <title>Title</title>
+                </head>
+                <body>
+                <!--[if lt IE 9]>
+                <script>window.location = 'browser.htm';</script>
+                <![endif]-->
+
+                <script>
+                    const node = document.createElement('a');
+                    node.href = 'http://www.google.com';
+                    node.target = '_blank';
+                    node.innerHTML = 'google';
+                    window.document.body.appendChild(node);
+                </script>
+                
+            </body></html>`;
+
+			const result = new HTMLParser(window).parse(
+				html,
+				document.implementation.createHTMLDocument()
+			);
+			expect(new HTMLSerializer().serializeToString(result)).toBe(expected);
+		});
+
+		it('Parses comments with dash in them.', () => {
+			const result = new HTMLParser(window).parse('<!-- comment with - in - it -->');
+			expect(result.childNodes.length).toBe(1);
+			expect(result.childNodes[0].nodeType).toBe(NodeTypeEnum.commentNode);
+			expect(result.childNodes[0].nodeValue).toBe(' comment with - in - it ');
+		});
+
+		it('Parses <template> elements, including its content.', () => {
+			const result = new HTMLParser(window).parse(
+				'<div><template><article><b></b></article></template></div>'
+			);
+			expect(result.childNodes.length).toBe(1);
+			const template = <HTMLTemplateElement>result.childNodes[0].childNodes[0];
+			expect(template.childNodes.length).toBe(0);
+			expect(template.children.length).toBe(0);
+			expect(template.content.children.length).toBe(1);
+			expect(template.content.children[0].tagName).toBe('ARTICLE');
+			expect(template.content.children[0].children.length).toBe(1);
+			expect(template.content.children[0].children[0].tagName).toBe('B');
+		});
+
+		it('Parses HTML with attributes using colon (:) and value containing ">".', () => {
+			const result = new HTMLParser(window).parse(
+				'<template><component :is="type" :disabled="index > 1" data-testid="button"/></template>'
+			);
+
+			expect(result.childNodes.length).toBe(1);
+
+			const template = <HTMLTemplateElement>result.childNodes[0];
+			expect(template.content.childNodes.length).toBe(1);
+			expect((<HTMLElement>template.content.childNodes[0]).tagName).toBe('COMPONENT');
+			expect((<HTMLElement>template.content.childNodes[0]).getAttribute(':disabled')).toBe(
+				'index > 1'
+			);
+		});
+
+		it('Doesn\'t close non-void elements when using "/>" when namespace is HTML.', () => {
+			const result = new HTMLParser(window).parse(
+				`
+                <span key1="value1"/>
+                <span key1="value1" key2/>
+                <span key2/>
+                `
+			);
+
+			expect(new HTMLSerializer().serializeToString(result).replace(/\s/gm, '')).toBe(
+				`
+                <span key1="value1">
+                    <span key1="value1" key2="">
+                        <span key2=""></span>
+                    </span>
+                </span>`.replace(/\s/gm, '')
+			);
+		});
+
+		it('Can read text with ">" in it.', () => {
+			const result = new HTMLParser(window).parse(`<span>1 > 0</span>`);
+
+			expect(new HTMLSerializer().serializeToString(result)).toBe(`<span>1 &gt; 0</span>`);
+		});
+
+		it('Parses malformed attributes.', () => {
+			const result = new HTMLParser(window).parse(
+				`
+                <span key1="value1""></span>
+                <span key1="value1"" key2></span>
+                <span key1 key2 key3="value3""></span>
+                <img key1="value1"" key2/>
+                <img key1="value1""
+                />
+                <img key1="value1""
+                key2/>
+                <span key1 key2 key3="value3"''" " "></span>
+                <span key1="value1 > value2"></span>
+                <img key1="value1 /> value2"/>
+                `
+			);
+
+			expect(result.children.length).toBe(9);
+
+			expect(result.children[0].attributes.length).toBe(1);
+			expect(result.children[0].attributes[0].name).toBe('key1');
+			expect(result.children[0].attributes[0].value).toBe('value1');
+
+			expect(result.children[1].attributes.length).toBe(2);
+			expect(result.children[1].attributes[0].name).toBe('key1');
+			expect(result.children[1].attributes[0].value).toBe('value1');
+			expect(result.children[1].attributes[1].name).toBe('key2');
+			expect(result.children[1].attributes[1].value).toBe('');
+
+			expect(result.children[2].attributes.length).toBe(3);
+			expect(result.children[2].attributes[0].name).toBe('key1');
+			expect(result.children[2].attributes[0].value).toBe('');
+			expect(result.children[2].attributes[1].name).toBe('key2');
+			expect(result.children[2].attributes[1].value).toBe('');
+			expect(result.children[2].attributes[2].name).toBe('key3');
+			expect(result.children[2].attributes[2].value).toBe('value3');
+
+			expect(result.children[3].attributes.length).toBe(2);
+			expect(result.children[3].attributes[0].name).toBe('key1');
+			expect(result.children[3].attributes[0].value).toBe('value1');
+			expect(result.children[3].attributes[1].name).toBe('key2');
+			expect(result.children[3].attributes[1].value).toBe('');
+
+			expect(result.children[4].attributes.length).toBe(1);
+			expect(result.children[4].attributes[0].name).toBe('key1');
+			expect(result.children[4].attributes[0].value).toBe('value1');
+
+			expect(result.children[5].attributes.length).toBe(2);
+			expect(result.children[5].attributes[0].name).toBe('key1');
+			expect(result.children[5].attributes[0].value).toBe('value1');
+			expect(result.children[5].attributes[1].name).toBe('key2');
+			expect(result.children[5].attributes[1].value).toBe('');
+
+			expect(result.children[6].attributes.length).toBe(3);
+			expect(result.children[6].attributes[0].name).toBe('key1');
+			expect(result.children[6].attributes[0].value).toBe('');
+			expect(result.children[6].attributes[1].name).toBe('key2');
+			expect(result.children[6].attributes[1].value).toBe('');
+			expect(result.children[6].attributes[2].name).toBe('key3');
+			expect(result.children[6].attributes[2].value).toBe('value3');
+
+			expect(result.children[7].attributes.length).toBe(1);
+			expect(result.children[7].attributes[0].name).toBe('key1');
+			expect(result.children[7].attributes[0].value).toBe('value1 > value2');
+
+			expect(result.children[8].attributes.length).toBe(1);
+			expect(result.children[8].attributes[0].name).toBe('key1');
+			expect(result.children[8].attributes[0].value).toBe('value1 /> value2');
+		});
+
+		it('Parses attributes with characters that lit-html is using (".", "$", "@").', () => {
+			const result = new HTMLParser(window).parse(
+				`
+                <img key1="value1" key2/>
+                <img key1="value1"/>
+                <span .key$lit$="{{lit-11111}}"></span>
+                <div @event="{{lit-22222}}"></div>
+                <article ?checked="{{lit-33333}}"></div>
+                <img key1="value1" key2/>
+                `
+			);
+
+			expect(result.querySelector('span')?.getAttribute('.key$lit$')).toBe('{{lit-11111}}');
+			expect(result.querySelector('div')?.getAttribute('@event')).toBe('{{lit-22222}}');
+			expect(result.querySelector('article')?.getAttribute('?checked')).toBe('{{lit-33333}}');
+		});
+
+		it('Parses attributes without apostrophs.', () => {
+			const result = new HTMLParser(window).parse(
+				`<div .theme$lit$={{lit-12345}} key1="value1">Test</div>`
+			);
+
+			expect(new HTMLSerializer().serializeToString(result)).toBe(
+				'<div .theme$lit$="{{lit-12345}}" key1="value1">Test</div>'
+			);
+		});
+
+		it('Parses attributes with URL without apostrophs.', () => {
+			const result = new HTMLParser(window).parse(
+				`<a href=http://www.github.com/path>Click me</a>`
+			);
+
+			expect(new HTMLSerializer().serializeToString(result)).toBe(
+				'<a href="http://www.github.com/path">Click me</a>'
+			);
+		});
+
+		it('Parses attributes with single apostrophs.', () => {
+			const result = new HTMLParser(window).parse(`<div key1='value1' key2='value2'>Test</div>`);
+
+			expect(new HTMLSerializer().serializeToString(result)).toBe(
+				`<div key1="value1" key2="value2">Test</div>`
+			);
+		});
+
+		it('Parses HTML with end ">" on a new line.', () => {
+			const result = new HTMLParser(window).parse(
+				`
+                <div key1="value1">
+                    Test
+                </div
+                >
+                `
+			);
+
+			expect(new HTMLSerializer().serializeToString(result).replace(/\s/gm, '')).toBe(
+				'<divkey1="value1">Test</div>'
+			);
+			expect(result.children[0].textContent.replace(/\s/gm, '')).toBe('Test');
+		});
+
+		it('Parses <ul> and <li> elements.', () => {
+			const result = new HTMLParser(window).parse(
+				`<div>
+                    <ul>
+                        <li>
+                            <ul>
+                                <li>aaaaa</li>
+                                <li>bbbbb</li>
+                            </ul>
+                        </li>
+                    </ul>
+                </div>`
+			);
+
+			expect(new HTMLSerializer().serializeToString(result).replace(/\s/gm, '')).toBe(
+				`<div>
+                    <ul>
+                        <li>
+                            <ul>
+                                <li>aaaaa</li>
+                                <li>bbbbb</li>
+                            </ul>
+                        </li>
+                    </ul>
+                </div>`.replace(/\s/gm, '')
+			);
+
+			const root2 = new HTMLParser(window).parse(`<li><li><span>Test</span></li></li>`);
+
+			expect(new HTMLSerializer().serializeToString(root2).replace(/\s/gm, '')).toBe(
+				`<li></li><li><span>Test</span></li>`.replace(/\s/gm, '')
+			);
+		});
+
+		it('Handles ending with unclosed start tag.', () => {
+			const result = new HTMLParser(window).parse(
+				`<div>
+                    <ul>
+                        <li>
+                            <ul>
+                                <li>aaaaa</li>
+                                <li
+                            </ul>
+                        </li>
+                    </ul>
+                </div>`
+			);
+
+			expect(new HTMLSerializer().serializeToString(result)).toBe(
+				`<div>
+                    <ul>
+                        <li>
+                            <ul>
+                                <li>aaaaa</li>
+                                <li <="" ul="">
+                        </li>
+                    </ul>
+                </li></ul></div>`
+			);
+		});
+
+		it('Handles complex style attributes', () => {
+			const result = new HTMLParser(window).parse(
+				`<div class="container">
+                    <div class="sliderContainer">
+                        <input class="slider" type="range" step="1" min="0" max="100">
+                            
+                        <div class="value">
+                            <kompis-text-0-0-0 data-element-name="kompis-text"><!---->0<!----></kompis-text-0-0-0>
+                        </div>
+		
+					    <div class="sliderBackground" style="background: linear-gradient(to right, rgb(17, 17, 17) 0%, rgb(17, 17, 17) 0.75rem, rgb(223, 223, 223) 0.75rem, rgb(223, 223, 223) 100%);"></div>
+				    </div>
+			    </div>`
+			);
+
+			expect(new HTMLSerializer().serializeToString(result).replace(/\s/gm, '')).toBe(
+				`<div class="container">
+                    <div class="sliderContainer">
+                        <input class="slider" type="range" step="1" min="0" max="100">
+                            
+                        <div class="value">
+                            <kompis-text-0-0-0 data-element-name="kompis-text"><!---->0<!----></kompis-text-0-0-0>
+                        </div>
+		
+					    <div class="sliderBackground" style="background: linear-gradient(to right, rgb(17, 17, 17) 0%, rgb(17, 17, 17) 0.75rem, rgb(223, 223, 223) 0.75rem, rgb(223, 223, 223) 100%);"></div>
+				    </div>
+			    </div>`.replace(/\s/gm, '')
+			);
+		});
+
+		it('Handles parsing custom elements registered with non-ASCII characters.', () => {
+			window.customElements.define('a-Öa', CustomElement);
+
+			const result = new HTMLParser(window).parse(
+				`
+                <div>
+                    <a-Öa key1="value1" key2="value2">
+                        <span>Test</span>
+                    </a-Öa>
+                </div>
+                `
+			);
+
+			expect(new HTMLSerializer().serializeToString(result).replace(/\s/gm, '')).toBe(
+				`
+                <div>
+                    <a-Öa key1="value1" key2="value2">
+                        <span>Test</span>
+                    </a-Öa>
+                </div>
+                `.replace(/\s/gm, '')
+			);
+		});
+
+		it('Sets attributes before connecting the element to the DOM.', () => {
+			/* eslint-disable jsdoc/require-jsdoc */
+			class CustomElement extends window.HTMLElement {
+				public key1: string | null = null;
+				public connectedCallback(): void {
+					this.key1 = this.getAttribute('key1');
+				}
+			}
+			/* eslint-enable jsdoc/require-jsdoc */
+
+			window.customElements.define('custom-element', CustomElement);
+
+			const result = new HTMLParser(window).parse(
+				`
+                <div>
+                    <custom-element key1="value1"></custom-element>
+                </div>
+                `
+			);
+
+			document.body.appendChild(result.children[0]);
+
+			expect(document.body.children[0].children[0]['key1']).toBe('value1');
+		});
+
+		it('Ignores <!DOCTYPE>, <html>, <head> and <body> when parsing an HTML fragment.', () => {
+			const result = new HTMLParser(window).parse(
+				'<!DOCTYPE html><html><head></head><body><div>Test</div></body></html>'
+			);
+
+			expect(new HTMLSerializer().serializeToString(result)).toBe('<div>Test</div>');
+		});
+
+		it('Handles multiple <!DOCTYPE>.', () => {
+			const result = new HTMLParser(window).parse(
+				`<!DOCTYPE math SYSTEM "http://www.w3.org/Math/DTD/mathml1/mathml.dtd">
+                <!DOCTYPE html>
+                <html>
+                    <head></head>
+                    <body><div>Test</div></body>
+                </html>`,
+				document.implementation.createHTMLDocument()
+			);
+
+			expect((<Document>result).doctype).toBe(result.childNodes[0]);
+			expect(result.childNodes.length).toBe(2);
+			expect(result.childNodes[0].nodeType).toBe(NodeTypeEnum.documentTypeNode);
+			expect((<DocumentType>result.childNodes[0]).name).toBe('math');
+			expect((<DocumentType>result.childNodes[0]).publicId).toBe('');
+			expect((<DocumentType>result.childNodes[0]).systemId).toBe(
+				'http://www.w3.org/Math/DTD/mathml1/mathml.dtd'
+			);
+			expect(result.childNodes[1]).toBeInstanceOf(HTMLHtmlElement);
+		});
+
+		it('Handles multiple <html> tag names', () => {
+			const result = new HTMLParser(window).parse(
+				`<html>
+                    <head></head>
+                    <body><div>Test</div></body>
+                </html>
+                <html style="color: red">
+                    <head></head>
+                    <body><div>Test</div></body>
+                </html>`,
+				document.implementation.createHTMLDocument()
+			);
+
+			expect(new HTMLSerializer().serializeToString(result)).toBe(
+				`<html style="color: red"><head></head>
+                    <body><div>Test</div>
+                
+                
+                    
+                    <div>Test</div>
+                </body></html>`
+			);
+		});
+
+		it('Handles multiple <head> tag names without <body>', () => {
+			const result = new HTMLParser(window).parse(
+				`<head style="color: red">
+                    <title>Title 1</title>
+                </head>
+                <head style="color: green">
+                    <title>Title 2</title>
+                </html>`,
+				document.implementation.createHTMLDocument()
+			);
+
+			expect(new HTMLSerializer().serializeToString(result)).toBe(`<html><head style="color: red">
+                    <title>Title 1</title>
+                <title>Title 2</title></head>
+                
+                    
+                <body></body></html>`);
+		});
+
+		it('Handles multiple <head> tag names with <body>', () => {
+			const result = new HTMLParser(window).parse(
+				`<head>
+                    <title>Title 1</title>
+                </head>
+                <body></body>
+                <head style="color: green">
+                    <title>Title 2</title>
+                </head>`,
+				document.implementation.createHTMLDocument()
+			);
+
+			expect(new HTMLSerializer().serializeToString(result)).toBe(`<html><head>
+                    <title>Title 1</title>
+                </head>
+                <body>
+                
+                    <title>Title 2</title>
+                </body></html>`);
+		});
+
+		it('Handles multiple <body> tag names', () => {
+			const root1 = new HTMLParser(window).parse(
+				`<body>
+                    <div>Test 1</div>
+                </body>
+                <body style="color: red">
+                    <div>Test 2</div>
+                </body>`,
+				document.implementation.createHTMLDocument()
+			);
+
+			expect(new HTMLSerializer().serializeToString(root1))
+				.toBe(`<html><head></head><body style="color: red">
+                    <div>Test 1</div>
+                
+                
+                    <div>Test 2</div>
+                </body></html>`);
+
+			const root2 = new HTMLParser(window).parse(
+				`<html>
+                    <head>
+                        <title>Title</title>
+                    </head>
+                    <body  style="color: red">
+                        <div>Test 1</div>
+                    </body>
+                    <body style="color: green">
+                        <div>Test 2</div>
+                    </body>
+                </html>`,
+				document.implementation.createHTMLDocument()
+			);
+
+			expect(new HTMLSerializer().serializeToString(root2)).toBe(`<html><head>
+                        <title>Title</title>
+                    </head>
+                    <body style="color: red">
+                        <div>Test 1</div>
+                    
+                    
+                        <div>Test 2</div>
+                    
+                </body></html>`);
+		});
+
+		it('Handles body in head', () => {
+			const result = new HTMLParser(window).parse(
+				`<head>
+                    <body>
+                        <div>Test</div>
+                    </body>
+                </head>`,
+				document.implementation.createHTMLDocument()
+			);
+
+			expect(new HTMLSerializer().serializeToString(result)).toBe(`<html><head>
+                    </head><body>
+                        <div>Test</div>
+                    
+                </body></html>`);
+		});
+
+		it('Handles body in body', () => {
+			const result = new HTMLParser(window).parse(
+				`<body>
+                    <body>
+                        <div>Test</div>
+                    </body>
+                </body>`,
+				document.implementation.createHTMLDocument()
+			);
+
+			expect(new HTMLSerializer().serializeToString(result)).toBe(`<html><head></head><body>
+                    
+                        <div>Test</div>
+                    
+                </body></html>`);
+		});
+
+		it('Handles body in div', () => {
+			const result = new HTMLParser(window).parse(
+				`<!DOCTYPE html>
+                <html>
+                    <head>
+                        <title>Title</title>
+                    </head>
+                    <div>
+                        <body>
+                            <div>Test</div>
+                        </body>
+                    </div>
+                </html>`,
+				document.implementation.createHTMLDocument()
+			);
+
+			expect(new HTMLSerializer().serializeToString(result)).toBe(`<!DOCTYPE html><html><head>
+                        <title>Title</title>
+                    </head>
+                    <body><div>
+                        
+                            <div>Test</div>
+                        
+                    </div>
+                </body></html>`);
+		});
+
+		it('Handles multiple body when in fragment mode', () => {
+			const result = new HTMLParser(window).parse(
+				`<body>
+                    <div>Test 1</div>
+                </body>
+                <body style="color: red">
+                    <div>Test 2</div>
+                </body>`
+			);
+
+			expect(new HTMLSerializer().serializeToString(result)).toBe(`
+                    <div>Test 1</div>
+                
+                
+                    <div>Test 2</div>
+                `);
+
+			const result2 = new HTMLParser(window).parse(
+				'<body><example></example>Example Text</body><body></body>'
+			);
+
+			expect(new HTMLSerializer().serializeToString(result2)).toBe(
+				'<example></example>Example Text'
+			);
+
+			const result3 = new HTMLParser(window).parse(
+				'<body><body></body><example></example>Example Text</body>'
+			);
+
+			expect(new HTMLSerializer().serializeToString(result3)).toBe(
+				'<example></example>Example Text'
+			);
+		});
+
+		it('Handles content outside document element', () => {
+			const result = new HTMLParser(window).parse(
+				`<!DOCTYPE html>
+                <div>Test</div>
+                <html>
+                    <head>
+                        <title>Title</title>
+                    </head>
+                    <body style="color: red">
+                        <div>Test</div>
+                    </body>
+                </html>`,
+				document.implementation.createHTMLDocument()
+			);
+
+			expect(new HTMLSerializer().serializeToString(result))
+				.toBe(`<!DOCTYPE html><html><head></head><body style="color: red"><div>Test</div>
+                
+                    
+                        <title>Title</title>
+                    
+                    
+                        <div>Test</div>
+                    
+                </body></html>`);
+		});
+
+		it('Handles processing instructions as comments when parser mode is HTML.', () => {
+			const result = new HTMLParser(window).parse(
+				`<?xml version="1.0" encoding="UTF-8"?>
+                <div>
+                    <div>Test</div>
+                </div>`
+			);
+
+			expect(new HTMLSerializer().serializeToString(result)).toBe(
+				`<!--?xml version="1.0" encoding="UTF-8"?-->
+                <div>
+                    <div>Test</div>
+                </div>`
+			);
+		});
+
+		it('Handles namespaced XML', () => {
+			const result = new HTMLParser(window).parse(
+				`<?xml version="1.0" encoding="UTF-8"?>
+                <personxml:person xmlns:personxml="http://www.your.example.com/xml/person" xmlns:cityxml="http://www.my.example.com/xml/cities">
+                <personxml:name>Rob</personxml:name>
+                <personxml:age>37</personxml:age>
+                <cityxml:homecity>
+                    <cityxml:name>London</cityxml:name>
+                    <cityxml:lat>123.000</cityxml:lat>
+                    <cityxml:long>0.00</cityxml:long>
+                </cityxml:homecity>
+                </personxml:person>`,
+				document.implementation.createHTMLDocument()
+			);
+
+			expect(result.children[0].namespaceURI).toBe('http://www.w3.org/1999/xhtml');
+
+			expect(new HTMLSerializer().serializeToString(result)).toBe(
+				`<!--?xml version="1.0" encoding="UTF-8"?--><html><head></head><body><personxml:person xmlns:personxml="http://www.your.example.com/xml/person" xmlns:cityxml="http://www.my.example.com/xml/cities">
+                <personxml:name>Rob</personxml:name>
+                <personxml:age>37</personxml:age>
+                <cityxml:homecity>
+                    <cityxml:name>London</cityxml:name>
+                    <cityxml:lat>123.000</cityxml:lat>
+                    <cityxml:long>0.00</cityxml:long>
+                </cityxml:homecity>
+                </personxml:person></body></html>`
+			);
+
+			expect(new XMLSerializer().serializeToString(result)).toBe(
+				`<!--?xml version="1.0" encoding="UTF-8"?--><html xmlns="http://www.w3.org/1999/xhtml"><head></head><body><personxml:person xmlns:personxml="http://www.your.example.com/xml/person" xmlns:cityxml="http://www.my.example.com/xml/cities">
+                <personxml:name>Rob</personxml:name>
+                <personxml:age>37</personxml:age>
+                <cityxml:homecity>
+                    <cityxml:name>London</cityxml:name>
+                    <cityxml:lat>123.000</cityxml:lat>
+                    <cityxml:long>0.00</cityxml:long>
+                </cityxml:homecity>
+                </personxml:person></body></html>`
+			);
+		});
+
+		it('Handles table elements', () => {
+			const result = new HTMLParser(window).parse(
+				`
+                <table>
+                    <caption>Test</caption>
+                    <colgroup>
+                        <col>
+                        <col>
+                        <col>
+                    </colgroup>
+                    <thead>
+                        <tr>
+                            <th>Test 1</th>
+                            <td>Test 2</td>
+                            <td>Test 3</td>
+                        </tr>
+                        <tr>
+                            <th>Test 4</th>
+                            <td>Test 5</td>
+                            <td>Test 6</td>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <th>Test 7</th>
+                            <td>Test 8</td>
+                            <td>Test 9</td>
+                        </tr>
+                        <tr>
+                            <th>Test 10</th>
+                            <td>Test 11</td>
+                            <td>Test 12</td>
+                        </tr>
+                    </tbody>
+                    <tfoot>
+                        <tr>
+                            <th>Test 13</th>
+                            <td>Test 14</td>
+                            <td>Test 15</td>
+                        </tr>
+                    </tfoot>
+                </table>
+                `
+			);
+
+			expect(new HTMLSerializer().serializeToString(result)).toBe(
+				`
+                <table>
+                    <caption>Test</caption>
+                    <colgroup>
+                        <col>
+                        <col>
+                        <col>
+                    </colgroup>
+                    <thead>
+                        <tr>
+                            <th>Test 1</th>
+                            <td>Test 2</td>
+                            <td>Test 3</td>
+                        </tr>
+                        <tr>
+                            <th>Test 4</th>
+                            <td>Test 5</td>
+                            <td>Test 6</td>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <th>Test 7</th>
+                            <td>Test 8</td>
+                            <td>Test 9</td>
+                        </tr>
+                        <tr>
+                            <th>Test 10</th>
+                            <td>Test 11</td>
+                            <td>Test 12</td>
+                        </tr>
+                    </tbody>
+                    <tfoot>
+                        <tr>
+                            <th>Test 13</th>
+                            <td>Test 14</td>
+                            <td>Test 15</td>
+                        </tr>
+                    </tfoot>
+                </table>
+                `
+			);
+		});
+
+		it('Handles malformed table elements', () => {
+			const result = new HTMLParser(window).parse(
+				`
+                <div class="test" disabled>
+                    <dl>
+                        <dt>Test
+                        <dd>Test</dt></dt></dt></dt>
+                        <dt>Test</dt>
+                        <dd>Test
+                    </dl>
+                    <select>
+                        <option>Test 1
+                        <optgroup>
+                            <option>Test 2
+                            <option>Test 3</option>
+                            <option>Test 4
+                        <optgroup>
+                            <option>Test 5
+                            <option>Test 6
+                    </select>
+                    <ruby>明日
+                        <rp>(
+                        <rt>Ashita
+                        <rp>)
+                    </ruby>
+                    <table>
+                        <caption>Test
+                        <colgroup>
+                            <col>
+                            <col>
+                            <col>
+                        <thead>
+                            <tr>
+                                <th>Test 1</th><td>Test 2<td>Test 3
+                            <tr>
+                                <th>Test 4<td>Test 5<td>Test 6</th></th></th>
+                        <tbody>
+                            <tr>
+                                <th>Test 7<td>Test 8<td>Test 9</td>
+                            </tr>
+                            <tr>
+                                <th></td></td></td></td></td></td>Test 10<td>Test 11<td>Test 12
+                        <tfoot>
+                            <tr>
+                                <th>Test 13<td>Test 14<td>Test 15
+                    </table>
+                </div>
+                `
+			);
+
+			expect(new HTMLSerializer().serializeToString(result)).toBe(
+				`
+                <div class="test" disabled="">
+                    <dl>
+                        <dt>Test
+                        </dt><dd>Test
+                        </dd><dt>Test</dt>
+                        <dd>Test
+                    </dd></dl>
+                    <select>
+                        <option>Test 1
+                        </option><optgroup>
+                            <option>Test 2
+                            </option><option>Test 3</option>
+                            <option>Test 4
+                        </option></optgroup><optgroup>
+                            <option>Test 5
+                            </option><option>Test 6
+                    </option></optgroup></select>
+                    <ruby>明日
+                        <rp>(
+                        </rp><rt>Ashita
+                        </rt><rp>)
+                    </rp></ruby>
+                    <table>
+                        <caption>Test
+                        </caption><colgroup>
+                            <col>
+                            <col>
+                            <col>
+                        </colgroup><thead>
+                            <tr>
+                                <th>Test 1</th><td>Test 2</td><td>Test 3
+                            </td></tr><tr>
+                                <th>Test 4</th><td>Test 5</td><td>Test 6
+                        </td></tr></thead><tbody>
+                            <tr>
+                                <th>Test 7</th><td>Test 8</td><td>Test 9</td>
+                            </tr>
+                            <tr>
+                                <th>Test 10</th><td>Test 11</td><td>Test 12
+                        </td></tr></tbody><tfoot>
+                            <tr>
+                                <th>Test 13</th><td>Test 14</td><td>Test 15
+                    </td></tr></tfoot></table>
+                </div>
+                `
+			);
+		});
+
+		it('Handles <thead> without table as parent', () => {
+			const result = new HTMLParser(window).parse(
+				`
+                <thead>
+                    <tr>
+                        <th>Test 1</th>
+                        <td>Test 2</td>
+                        <td>Test 3</td>
+                    </tr>
+                </thead>
+                `
+			);
+
+			expect(new HTMLSerializer().serializeToString(result)).toBe(
+				`
+                
+                    
+                        Test 1
+                        Test 2
+                        Test 3
+                    
+                
+                `
+			);
+		});
+
+		it('Handles <tbody> without table as parent', () => {
+			const result = new HTMLParser(window).parse(
+				`
+                <tbody>
+                    <tr>
+                        <th>Test 1</th>
+                        <td>Test 2</td>
+                        <td>Test 3</td>
+                    </tr>
+                </tbody>
+                `
+			);
+
+			expect(new HTMLSerializer().serializeToString(result)).toBe(
+				`
+                
+                    
+                        Test 1
+                        Test 2
+                        Test 3
+                    
+                
+                `
+			);
+		});
+
+		it('Handles <tfoot> without table as parent', () => {
+			const result = new HTMLParser(window).parse(
+				`
+                <tfoot>
+                    <tr>
+                        <th>Test 1</th>
+                        <td>Test 2</td>
+                        <td>Test 3</td>
+                    </tr>
+                </tfoot>
+                `
+			);
+
+			expect(new HTMLSerializer().serializeToString(result)).toBe(
+				`
+                
+                    
+                        Test 1
+                        Test 2
+                        Test 3
+                    
+                
+                `
+			);
+		});
+
+		it('Handles <tr> without table as parent', () => {
+			const result = new HTMLParser(window).parse(
+				`<tr>
+                    <th>Test 1</th>
+                    <td>Test 2</td>
+                    <td>Test 3</td>
+                </tr>`
+			);
+
+			expect(new HTMLSerializer().serializeToString(result)).toBe(
+				`
+                    Test 1
+                    Test 2
+                    Test 3
+                `
+			);
+		});
+
+		it('Always adds <tbody> when parsing <tr> elements', () => {
+			const result = new HTMLParser(window).parse(
+				`<table>
+                    <tr>
+                        <th>Test 1</th>
+                        <td>Test 2</td>
+                        <td>Test 3</td>
+                    </tr>
+                </table>`
+			);
+
+			expect(new HTMLSerializer().serializeToString(result)).toBe(
+				`<table>
+                    <tbody><tr>
+                        <th>Test 1</th>
+                        <td>Test 2</td>
+                        <td>Test 3</td>
+                    </tr>
+                </tbody></table>`
+			);
+		});
+
+		it('Adds multiple <tbody> when parsing <tr> elements', () => {
+			const result = new HTMLParser(window).parse(
+				`<table>
+                    <tr>
+                        <th>Test 1</th>
+                        <td>Test 2</td>
+                        <td>Test 3</td>
+                    </tr>
+                    <tbody>
+                        <tr>
+                            <th>Test 1</th>
+                            <td>Test 2</td>
+                            <td>Test 3</td>
+                        </tr>
+                    </tbody>
+                </table>`
+			);
+
+			expect(new HTMLSerializer().serializeToString(result)).toBe(
+				`<table>
+                    <tbody><tr>
+                        <th>Test 1</th>
+                        <td>Test 2</td>
+                        <td>Test 3</td>
+                    </tr>
+                    </tbody><tbody>
+                        <tr>
+                            <th>Test 1</th>
+                            <td>Test 2</td>
+                            <td>Test 3</td>
+                        </tr>
+                    </tbody>
+                </table>`
+			);
+		});
+
+		it('Moves invalid elements inside <table> as elements before table', () => {
+			const result = new HTMLParser(window).parse(
+				`<table><div><tr><th>Test 1</th><td>Test 2</td><td>Test 3</td></tr></div></table>`
+			);
+
+			expect(new HTMLSerializer().serializeToString(result)).toBe(
+				`<div></div><table><tbody><tr><th>Test 1</th><td>Test 2</td><td>Test 3</td></tr></tbody></table>`
+			);
+		});
+
+		it('Moves invalid elements inside <tbody> as elements before table', () => {
+			const result = new HTMLParser(window).parse(
+				`<table><tbody><div><tr><th>Test 1</th><td>Test 2</td><td>Test 3</td></tr></div></tbody></table>`
+			);
+
+			expect(new HTMLSerializer().serializeToString(result)).toBe(
+				`<div></div><table><tbody><tr><th>Test 1</th><td>Test 2</td><td>Test 3</td></tr></tbody></table>`
+			);
+		});
+
+		it('Closes invalid elements inside table if there is no parent to move them to', () => {
+			const result = new HTMLParser(window).parse(
+				`<div><tr><th>Test 1</th><td>Test 2</td><td>Test 3</td></tr></div>`,
+				document.createElement('table')
+			);
+
+			expect(new HTMLSerializer().serializeToString(result)).toBe(
+				`<table><div></div><tbody><tr><th>Test 1</th><td>Test 2</td><td>Test 3</td></tr></tbody></table>`
+			);
+		});
+
+		it('Handles HTML used for TreeWalker test', () => {
+			const result = <Document>(
+				new HTMLParser(window).parse(TreeWalkerHTML, document.implementation.createHTMLDocument())
+			);
+
+			expect(result.body.childNodes.length).toBe(5);
+			expect(result.body.childNodes[0].textContent).toBe('\n\t\t\t');
+			expect(result.body.childNodes[1].textContent).toBe(
+				'\n\t\t\t\t\n\t\t\t\tBold\n\t\t\t\t\n\t\t\t\tSpan\n\t\t\t'
+			);
+			expect(result.body.childNodes[2].textContent).toBe('\n\t\t\t');
+			expect(result.body.childNodes[3].textContent).toBe(
+				'\n\t\t\t\t\n\t\t\t\tBold\n\t\t\t\t\n\t\t\t'
+			);
+			expect(result.body.childNodes[4].textContent).toBe('\n\t\t\n\t');
+
+			expect(result.documentElement.outerHTML).toBe(`<html><head>
+			<title>Title</title>
+		</head>
+		<body>
+			<div class="class1 class2" id="id">
+				<!-- Comment 1 !-->
+				<b>Bold</b>
+				<!-- Comment 2 !-->
+				<span>Span</span>
+			</div>
+			<article class="class1 class2" id="id">
+				<!-- Comment 1 !-->
+				<b>Bold</b>
+				<!-- Comment 2 !-->
+			</article>
+		
+	</body></html>`);
+		});
+
+		it('Handles HTML entities correctly for #1494', () => {
+			const div = document.createElement('div');
+
+			div.innerText = '<b>a</b>';
+
+			expect(div.innerHTML).toBe('&lt;b&gt;a&lt;/b&gt;');
+			expect(div.outerHTML).toBe('<div>&lt;b&gt;a&lt;/b&gt;</div>');
+		});
+
+		it('Handles HTML entities correctly for #1498', () => {
+			const result = <Document>(
+				new HTMLParser(window).parse(
+					'<html test="1"><body>Test></body></html>',
+					document.implementation.createHTMLDocument()
+				)
+			);
+
+			expect(result.documentElement.outerHTML).toBe(
+				'<html test="1"><head></head><body>Test&gt;</body></html>'
+			);
+		});
+
+		it('Handles attributes with [] in the name for #1638', () => {
+			const result = new HTMLParser(window).parse(`<div [innerHTML]="'TEST'"></div>`);
+
+			expect(new HTMLSerializer().serializeToString(result)).toBe(
+				`<div [innerhtml]="'TEST'"></div>`
+			);
+		});
+
+		it('Handles HTML for table tags in #1126', () => {
+			const result = new HTMLParser(window).parse(
+				`
+                <div class="test" disabled>
+                    <dl>
+                        <dt>Test
+                        <dd>Test</dt></dt></dt></dt>
+                        <dt>Test</dt>
+                        <dd>Test
+                    </dl>
+                    <select>
+                        <option>Test 1
+                        <optgroup>
+                            <option>Test 2
+                            <option>Test 3</option>
+                            <option>Test 4
+                        <optgroup>
+                            <option>Test 5
+                            <option>Test 6
+                    </select>
+                    <ruby>明日
+                        <rp>(
+                        <rt>Ashita
+                        <rp>)
+                    </ruby>
+                    <table>
+                        <caption>Test
+                        <colgroup>
+                            <col>
+                            <col>
+                            <col>
+                        <thead>
+                            <tr>
+                                <th>Test 1</th><td>Test 2<td>Test 3
+                            <tr>
+                                <th>Test 4<td>Test 5<td>Test 6</th></th></th>
+                        <tbody>
+                            <tr>
+                                <th>Test 7<td>Test 8<td>Test 9</td>
+                            </tr>
+                            <tr>
+                                <th></td></td></td></td></td></td>Test 10<td>Test 11<td>Test 12
+                        <tfoot>
+                            <tr>
+                                <th>Test 13<td>Test 14<td>Test 15
+                    </table>
+                </div>
+                `
+			);
+
+			expect(new HTMLSerializer().serializeToString(result)).toBe(
+				`
+                <div class="test" disabled="">
+                    <dl>
+                        <dt>Test
+                        </dt><dd>Test
+                        </dd><dt>Test</dt>
+                        <dd>Test
+                    </dd></dl>
+                    <select>
+                        <option>Test 1
+                        </option><optgroup>
+                            <option>Test 2
+                            </option><option>Test 3</option>
+                            <option>Test 4
+                        </option></optgroup><optgroup>
+                            <option>Test 5
+                            </option><option>Test 6
+                    </option></optgroup></select>
+                    <ruby>明日
+                        <rp>(
+                        </rp><rt>Ashita
+                        </rt><rp>)
+                    </rp></ruby>
+                    <table>
+                        <caption>Test
+                        </caption><colgroup>
+                            <col>
+                            <col>
+                            <col>
+                        </colgroup><thead>
+                            <tr>
+                                <th>Test 1</th><td>Test 2</td><td>Test 3
+                            </td></tr><tr>
+                                <th>Test 4</th><td>Test 5</td><td>Test 6
+                        </td></tr></thead><tbody>
+                            <tr>
+                                <th>Test 7</th><td>Test 8</td><td>Test 9</td>
+                            </tr>
+                            <tr>
+                                <th>Test 10</th><td>Test 11</td><td>Test 12
+                        </td></tr></tbody><tfoot>
+                            <tr>
+                                <th>Test 13</th><td>Test 14</td><td>Test 15
+                    </td></tr></tfoot></table>
+                </div>
+                `
+			);
+		});
+
+		it('Handles comment with HTML for #1630', () => {
+			const result = <Document>new HTMLParser(window).parse(
+				`<!DOCTYPE html>
+                <html lang="en">
+                <head>
+                <meta charset="UTF-8">
+                <meta name="viewport" content="width=device-width, initial-scale=1.0">
+                <title>Document</title>
+                <!-- <link rel="preload" href="/fonts/atkinson-regular.woff" as="font" type="font/woff" crossorigin /> -->
+                <!-- <link rel="preload" href="/fonts/atkinson-regular.woff" as="font" type="font/woff" crossorigin /> --!>
+                </head>
+                <body>
+                
+                </body>
+                </html>`,
+				document.implementation.createHTMLDocument()
+			);
+
+			expect(result.documentElement.outerHTML).toBe(`<html lang="en"><head>
+                <meta charset="UTF-8">
+                <meta name="viewport" content="width=device-width, initial-scale=1.0">
+                <title>Document</title>
+                <!-- <link rel="preload" href="/fonts/atkinson-regular.woff" as="font" type="font/woff" crossorigin /> -->
+                <!-- <link rel="preload" href="/fonts/atkinson-regular.woff" as="font" type="font/woff" crossorigin /> -->
+                </head>
+                <body>
+                
+                
+                </body></html>`);
+		});
+
+		it('Handles unknown element child without a config inside a known parent element with a config', () => {
+			const result = new HTMLParser(window).parse(
+				`<div>
+                    <table>
+                        <unknown-element></unknown-element>
+                    </table>
+                </div>`
+			);
+
+			expect(new HTMLSerializer().serializeToString(result)).toBe(
+				`<div>
+                    <unknown-element></unknown-element><table>
+                        
+                    </table>
+                </div>`
+			);
+		});
+
+		it('Handles document wirhout doctype', () => {
+			const result = <Document>new HTMLParser(window).parse(
+				`<html lang="en">
+                    <head>
+                        <title>Document</title>
+                    </head>
+                    <body>
+                        <div>Test</div>
+                    </body>
+                </html>`,
+				document.implementation.createHTMLDocument()
+			);
+
+			expect(new HTMLSerializer().serializeToString(result)).toBe(
+				`<html lang="en"><head>
+                        <title>Document</title>
+                    </head>
+                    <body>
+                        <div>Test</div>
+                    
+                </body></html>`
+			);
+		});
+	});
+});
diff --git a/packages/happy-dom/test/html-serializer/HTMLSerializer.test.ts b/packages/happy-dom/test/html-serializer/HTMLSerializer.test.ts
new file mode 100644
index 000000000..c595969ba
--- /dev/null
+++ b/packages/happy-dom/test/html-serializer/HTMLSerializer.test.ts
@@ -0,0 +1,301 @@
+import HTMLSerializer from '../../src/html-serializer/HTMLSerializer.js';
+import Window from '../../src/window/Window.js';
+import Document from '../../src/nodes/document/Document.js';
+import CustomElement from '../CustomElement.js';
+import * as PropertySymbol from '../../src/PropertySymbol.js';
+import { beforeEach, afterEach, describe, it, expect } from 'vitest';
+
+describe('HTMLSerializer', () => {
+	let window: Window;
+	let document: Document;
+	let serializer: HTMLSerializer;
+
+	beforeEach(() => {
+		window = new Window();
+		document = window.document;
+		serializer = new HTMLSerializer();
+
+		window.customElements.define('custom-element', CustomElement);
+	});
+
+	afterEach(() => {
+		CustomElement.shadowRootMode = 'open';
+	});
+
+	describe('serializeToString()', () => {
+		it('Serializes a <div> element.', () => {
+			const div = document.createElement('div');
+			const span = document.createElement('span');
+
+			span.setAttribute('attr1', 'value1');
+			span.setAttribute('attr2', 'value2');
+			span.setAttribute('attr3', '');
+
+			div.setAttribute('attr1', 'value1');
+			div.setAttribute('attr2', 'value2');
+			div.setAttribute('attr3', '');
+			div.appendChild(span);
+
+			expect(serializer.serializeToString(div)).toBe(
+				'<div attr1="value1" attr2="value2" attr3=""><span attr1="value1" attr2="value2" attr3=""></span></div>'
+			);
+		});
+
+		it('Serializes void elements elements like img correctly.', () => {
+			const div = document.createElement('div');
+			const img = document.createElement('img');
+
+			img.setAttribute('src', 'https://localhost/img.jpg');
+
+			div.appendChild(img);
+
+			expect(serializer.serializeToString(div)).toBe(
+				'<div><img src="https://localhost/img.jpg"></div>'
+			);
+		});
+
+		it('Serializes a comment node.', () => {
+			const div = document.createElement('div');
+			const comment = document.createComment('');
+
+			comment.textContent = 'Some comment.';
+
+			div.appendChild(comment);
+
+			expect(serializer.serializeToString(div)).toBe('<div><!--Some comment.--></div>');
+		});
+
+		it('Serializes a text nodes.', () => {
+			const div = document.createElement('div');
+			const text1 = document.createTextNode('Text 1.');
+			const text2 = document.createTextNode('Text 2.');
+
+			div.appendChild(text1);
+			div.appendChild(text2);
+
+			expect(serializer.serializeToString(div)).toBe('<div>Text 1.Text 2.</div>');
+		});
+
+		it('Serializes a template node.', () => {
+			const template = document.createElement('template');
+			template.innerHTML = '<div>Test</div>';
+			expect(serializer.serializeToString(template)).toBe('<template><div>Test</div></template>');
+		});
+
+		it('Serializes a mix of nodes.', () => {
+			const div = document.createElement('div');
+			const comment1 = document.createComment('Comment 1.');
+			const comment2 = document.createComment('Comment 2.');
+			const text1 = document.createTextNode('Text 1.');
+			const text2 = document.createTextNode('Text 2.');
+			const text3 = document.createTextNode('Text 3.');
+			const span1 = document.createElement('span');
+			const span2 = document.createElement('span');
+
+			span2.setAttribute('attr1', 'value1');
+			span2.appendChild(text3);
+
+			span1.setAttribute('attr1', 'value1');
+			span1.setAttribute('attr2', 'value2');
+			span1.setAttribute('attr3', '');
+			span1.appendChild(span2);
+
+			div.appendChild(comment1);
+			div.appendChild(text1);
+			div.appendChild(comment2);
+			div.appendChild(text2);
+			div.appendChild(span1);
+
+			expect(serializer.serializeToString(div)).toBe(
+				'<div><!--Comment 1.-->Text 1.<!--Comment 2.-->Text 2.<span attr1="value1" attr2="value2" attr3=""><span attr1="value1">Text 3.</span></span></div>'
+			);
+		});
+
+		it('Serializes a custom element.', () => {
+			const div = document.createElement('div');
+			const customElement = document.createElement('custom-element');
+
+			customElement.setAttribute('attr1', 'value1');
+			customElement.setAttribute('attr2', 'value2');
+			customElement.setAttribute('attr3', '');
+
+			div.appendChild(customElement);
+
+			// Connects the custom element to DOM which will trigger connectedCallback() on it
+			document.body.appendChild(div);
+
+			expect(serializer.serializeToString(div)).toBe(
+				'<div><custom-element attr1="value1" attr2="value2" attr3=""></custom-element></div>'
+			);
+		});
+
+		it('Includes shadow roots of custom elements when "allShadowRoots" is set as an option.', () => {
+			const div = document.createElement('div');
+			const customElement1 = document.createElement('custom-element');
+
+			CustomElement.shadowRootMode = 'closed';
+
+			const customElement2 = document.createElement('custom-element');
+
+			customElement1.setAttribute('key1', 'value1');
+			customElement1.setAttribute('key2', 'value2');
+			customElement1.innerHTML = '<span>Slotted content</span>';
+
+			customElement2.setAttribute('key1', 'value4');
+			customElement2.setAttribute('key2', 'value5');
+
+			div.appendChild(customElement1);
+			div.appendChild(customElement2);
+
+			// Connects the custom element to DOM which will trigger connectedCallback() on it
+			document.body.appendChild(div);
+
+			const serializer = new HTMLSerializer({ allShadowRoots: true });
+
+			expect(serializer.serializeToString(div).replace(/[\s]/gm, '')).toBe(
+				`
+					<div>
+						<custom-element key1="value1" key2="value2">
+							<template shadowrootmode="open">
+								<style>
+									:host {
+										display: block;
+                                        font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
+									}
+									span {
+										color: pink;
+									}
+									.propKey {
+										color: yellow;
+									}
+								</style>
+								<div>
+									<span class="propKey">
+										key1 is "value1" and key2 is "value2".
+									</span>
+									<span class="children">
+                                        #1SPANSlottedcontent
+									</span>
+									<span><slot></slot></span>
+								</div>
+							</template>
+							<span>Slotted content</span>
+						</custom-element>
+						<custom-element key1="value4" key2="value5"></custom-element>
+					</div>`.replace(/[\s]/gm, '')
+			);
+		});
+
+		it('Renders the code from the documentation for server-side rendering as expected.', () => {
+			document.write(`
+                <html>
+                    <head>
+                         <title>Test page</title>
+                    </head>
+                    <body>
+                        <div>
+                            <my-custom-element>
+                                <span>Slotted content</span>
+                            </my-custom-element>
+                        </div>
+                        <script>
+                            class MyCustomElement extends HTMLElement {
+                                constructor() {
+                                    super();
+                                    this.attachShadow({ mode: 'open' });
+                                }
+            
+                                connectedCallback() {
+                                    this.shadowRoot.innerHTML = \`
+                                        <style>
+                                            :host {
+                                                display: inline-block;
+                                                background: red;
+                                            }
+                                        </style>
+                                        <div><slot></slot></div>
+                                    \`;
+                                }
+                            }
+            
+                            customElements.define('my-custom-element', MyCustomElement);
+                        </script>
+                    </body>
+                </html>
+            `);
+
+			expect(
+				document.body
+					.querySelector('div')
+					?.getInnerHTML({ includeShadowRoots: true })
+					.replace(/\s/gm, '')
+			).toBe(
+				`
+            <my-custom-element>
+                <template shadowrootmode="open">
+                    <style>
+                        :host {
+                            display: inline-block;
+                            background: red;
+                        }
+                    </style>
+                    <div><slot></slot></div>
+                </template>
+                <span>Slotted content</span>
+            </my-custom-element>
+            `.replace(/\s/gm, '')
+			);
+		});
+
+		it('Does not escape unicode attributes.', () => {
+			const div = document.createElement('div');
+
+			div.setAttribute('attr1', 'Hello \u{2068}John\u{2069}');
+			div.setAttribute('attr2', '<span> test');
+			div.setAttribute('attr3', '');
+
+			expect(serializer.serializeToString(div)).toBe(
+				'<div attr1="Hello ⁨John⁩" attr2="&lt;span&gt; test" attr3=""></div>'
+			);
+		});
+
+		it('Serializes the is value.', () => {
+			const div = document.createElement('div', { is: 'custom-element' });
+
+			expect(serializer.serializeToString(div)).toBe('<div is="custom-element"></div>');
+		});
+
+		it('Ignores the is value if the is attribute is present.', () => {
+			const div = document.createElement('div', { is: 'custom-element' });
+			div.setAttribute('is', 'custom-replacement');
+
+			expect(serializer.serializeToString(div)).toBe('<div is="custom-replacement"></div>');
+		});
+
+		it('Serializes text content.', () => {
+			const div = document.createElement('div');
+
+			div.innerText = '<b>a</b>';
+			expect(serializer.serializeToString(div)).toBe('<div>&lt;b&gt;a&lt;/b&gt;</div>');
+		});
+
+		it('Serializes attributes to prevent injection attacks.', () => {
+			const a = document.createElement('a');
+
+			document.body.appendChild(a);
+
+			a.href = 'https://example.com" style="font-size: 500%;';
+			a.textContent = "I'm a link!";
+
+			expect(serializer.serializeToString(a)).toBe(
+				`<a href="https://example.com&quot; style=&quot;font-size: 500%;">I'm a link!</a>`
+			);
+
+			document.body.innerHTML = `<a href="https://www.com/" style="background-image: url(&quot;https://cdn.cookie.org/image.svg&quot;);"></a>`;
+
+			expect(document.body.innerHTML).toBe(
+				`<a href="https://www.com/" style="background-image: url(&quot;https://cdn.cookie.org/image.svg&quot;);"></a>`
+			);
+		});
+	});
+});
diff --git a/packages/happy-dom/test/mutation-observer/MutationObserver.test.ts b/packages/happy-dom/test/mutation-observer/MutationObserver.test.ts
index 2ca1c8e95..39b3b5514 100644
--- a/packages/happy-dom/test/mutation-observer/MutationObserver.test.ts
+++ b/packages/happy-dom/test/mutation-observer/MutationObserver.test.ts
@@ -264,7 +264,7 @@ describe('MutationObserver', () => {
 			const observer = new window.MutationObserver((mutationRecords) => {
 				records = mutationRecords;
 			});
-			document.appendChild(div);
+			document.body.appendChild(div);
 			observer.observe(document, { attributes: true, subtree: true });
 			div.setAttribute('attr', 'value');
 
diff --git a/packages/happy-dom/test/nodes/document/Document.test.ts b/packages/happy-dom/test/nodes/document/Document.test.ts
index 4d29029ae..3de45d609 100644
--- a/packages/happy-dom/test/nodes/document/Document.test.ts
+++ b/packages/happy-dom/test/nodes/document/Document.test.ts
@@ -84,7 +84,7 @@ describe('Document', () => {
 
 	describe('get children()', () => {
 		it('Returns Element child nodes.', () => {
-			document.appendChild(document.createTextNode('test'));
+			document.appendChild(document.createComment('test'));
 			expect(document.children.length).toEqual(1);
 			expect(document.children[0] === document.documentElement).toBe(true);
 		});
@@ -161,9 +161,9 @@ describe('Document', () => {
 
 	describe('get childElementCount()', () => {
 		it('Returns child element count.', () => {
-			document.appendChild(document.createElement('div'));
-			document.appendChild(document.createTextNode('test'));
-			expect(document.childElementCount).toEqual(2);
+			document.body.appendChild(document.createElement('div'));
+			document.body.appendChild(document.createTextNode('test'));
+			expect(document.body.childElementCount).toEqual(1);
 		});
 	});
 
@@ -381,6 +381,7 @@ describe('Document', () => {
 
 	describe('get doctype()', () => {
 		it('Returns DocumentType element.', () => {
+			document.write('<!DOCTYPE html>');
 			expect(document.doctype === document.childNodes[0]).toBe(true);
 		});
 	});
@@ -408,8 +409,8 @@ describe('Document', () => {
 
 				style.appendChild(textNode);
 
-				document.appendChild(style);
-				document.appendChild(link);
+				document.body.appendChild(style);
+				document.body.appendChild(link);
 
 				setTimeout(() => {
 					expect(fetchedUrl).toBe('https://localhost:8080/path/to/file.css');
@@ -434,8 +435,8 @@ describe('Document', () => {
 			const div = document.createElement('div');
 			const span = document.createElement('span');
 
-			document.appendChild(div);
-			document.appendChild(span);
+			document.body.appendChild(div);
+			document.body.appendChild(span);
 
 			expect(document.activeElement === document.body).toBe(true);
 
@@ -455,7 +456,7 @@ describe('Document', () => {
 		it('Unsets the active element when it gets disconnected.', () => {
 			const div = document.createElement('div');
 
-			document.appendChild(div);
+			document.body.appendChild(div);
 
 			expect(document.activeElement === document.body).toBe(true);
 
@@ -580,14 +581,14 @@ describe('Document', () => {
 			let isCalled = false;
 
 			vi.spyOn(ParentNodeUtility, 'append').mockImplementation((parentNode, ...nodes) => {
-				expect(parentNode === document).toBe(true);
+				expect(parentNode === document.body).toBe(true);
 				expect(nodes.length).toBe(2);
 				expect(nodes[0] === node1).toBe(true);
 				expect(nodes[1] === node2).toBe(true);
 				isCalled = true;
 			});
 
-			document.append(node1, node2);
+			document.body.append(node1, node2);
 			expect(isCalled).toBe(true);
 		});
 	});
@@ -599,14 +600,14 @@ describe('Document', () => {
 			let isCalled = false;
 
 			vi.spyOn(ParentNodeUtility, 'prepend').mockImplementation((parentNode, ...nodes) => {
-				expect(parentNode === document).toBe(true);
+				expect(parentNode === document.body).toBe(true);
 				expect(nodes.length).toBe(2);
 				expect(nodes[0] === node1).toBe(true);
 				expect(nodes[1] === node2).toBe(true);
 				isCalled = true;
 			});
 
-			document.prepend(node1, node2);
+			document.body.prepend(node1, node2);
 			expect(isCalled).toBe(true);
 		});
 	});
@@ -618,14 +619,14 @@ describe('Document', () => {
 			let isCalled = false;
 
 			vi.spyOn(ParentNodeUtility, 'replaceChildren').mockImplementation((parentNode, ...nodes) => {
-				expect(parentNode === document).toBe(true);
+				expect(parentNode === document.body).toBe(true);
 				expect(nodes.length).toBe(2);
 				expect(nodes[0] === node1).toBe(true);
 				expect(nodes[1] === node2).toBe(true);
 				isCalled = true;
 			});
 
-			document.replaceChildren(node1, node2);
+			document.body.replaceChildren(node1, node2);
 			expect(isCalled).toBe(true);
 		});
 	});
@@ -760,7 +761,7 @@ describe('Document', () => {
 		it('Returns elements by name.', () => {
 			const parent = document.createElement('div');
 			parent.innerHTML = `<img alt="" name="image" src=""/><img alt="" name="image" src=""/><img alt="" name="image" src=""/><img alt="" name="image" src=""/><meta name="test"><p name="test"><span name="test">test</span></p></meta>`;
-			document.appendChild(parent);
+			document.body.appendChild(parent);
 			expect(document.getElementsByName('image').length).toBe(4);
 			expect(document.getElementsByName('test').length).toBe(3);
 		});
@@ -771,18 +772,18 @@ describe('Document', () => {
 			const div = document.createElement('div');
 			const span = document.createElement('span');
 
-			for (const node of Array.from(document.childNodes)) {
+			for (const node of Array.from(document.body.childNodes)) {
 				(<Node>node.parentNode).removeChild(node);
 			}
 
-			document.appendChild(document.createComment('test'));
-			document.appendChild(div);
-			document.appendChild(document.createComment('test'));
-			document.appendChild(span);
+			document.body.appendChild(document.createComment('test'));
+			document.body.appendChild(div);
+			document.body.appendChild(document.createComment('test'));
+			document.body.appendChild(span);
 
-			expect(document.children.length).toBe(2);
-			expect(document.children[0]).toBe(div);
-			expect(document.children[1]).toBe(span);
+			expect(document.body.children.length).toBe(2);
+			expect(document.body.children[0]).toBe(div);
+			expect(document.body.children[1]).toBe(span);
 		});
 
 		// See: https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment
@@ -793,16 +794,16 @@ describe('Document', () => {
 
 			const clone = template.content.cloneNode(true);
 
-			for (const node of Array.from(document.childNodes)) {
+			for (const node of Array.from(document.body.childNodes)) {
 				(<Node>node.parentNode).removeChild(node);
 			}
 
-			document.appendChild(clone);
+			document.body.appendChild(clone);
 
 			expect(clone.childNodes.length).toBe(0);
 			expect(clone.children.length).toBe(0);
 			expect(
-				Array.from(document.children)
+				Array.from(document.body.children)
 					.map((child) => child.outerHTML)
 					.join('')
 			).toBe('<div>Div</div><span>Span</span>');
@@ -814,19 +815,19 @@ describe('Document', () => {
 			const div = document.createElement('div');
 			const span = document.createElement('span');
 
-			for (const node of Array.from(document.childNodes)) {
+			for (const node of Array.from(document.body.childNodes)) {
 				(<Node>node.parentNode).removeChild(node);
 			}
 
-			document.appendChild(document.createComment('test'));
-			document.appendChild(div);
-			document.appendChild(document.createComment('test'));
-			document.appendChild(span);
+			document.body.appendChild(document.createComment('test'));
+			document.body.appendChild(div);
+			document.body.appendChild(document.createComment('test'));
+			document.body.appendChild(span);
 
-			document.removeChild(div);
+			document.body.removeChild(div);
 
-			expect(document.children.length).toBe(1);
-			expect(document.children[0]).toBe(span);
+			expect(document.body.children.length).toBe(1);
+			expect(document.body.children[0]).toBe(span);
 		});
 	});
 
@@ -836,20 +837,20 @@ describe('Document', () => {
 			const div2 = document.createElement('div');
 			const span = document.createElement('span');
 
-			for (const node of Array.from(document.childNodes)) {
+			for (const node of Array.from(document.body.childNodes)) {
 				(<Node>node.parentNode).removeChild(node);
 			}
 
-			document.appendChild(document.createComment('test'));
-			document.appendChild(div1);
-			document.appendChild(document.createComment('test'));
-			document.appendChild(span);
-			document.insertBefore(div2, div1);
+			document.body.appendChild(document.createComment('test'));
+			document.body.appendChild(div1);
+			document.body.appendChild(document.createComment('test'));
+			document.body.appendChild(span);
+			document.body.insertBefore(div2, div1);
 
-			expect(document.children.length).toBe(3);
-			expect(document.children[0]).toBe(div2);
-			expect(document.children[1]).toBe(div1);
-			expect(document.children[2]).toBe(span);
+			expect(document.body.children.length).toBe(3);
+			expect(document.body.children[0]).toBe(div2);
+			expect(document.body.children[1]).toBe(div1);
+			expect(document.body.children[2]).toBe(span);
 		});
 
 		// See: https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment
@@ -862,18 +863,18 @@ describe('Document', () => {
 
 			const clone = template.content.cloneNode(true);
 
-			for (const node of Array.from(document.childNodes)) {
+			for (const node of Array.from(document.body.childNodes)) {
 				(<Node>node.parentNode).removeChild(node);
 			}
 
-			document.appendChild(child1);
-			document.appendChild(child2);
+			document.body.appendChild(child1);
+			document.body.appendChild(child2);
 
-			document.insertBefore(clone, child2);
+			document.body.insertBefore(clone, child2);
 
-			expect(document.children.length).toBe(4);
+			expect(document.body.children.length).toBe(4);
 			expect(
-				Array.from(document.children)
+				Array.from(document.body.children)
 					.map((child) => child.outerHTML)
 					.join('')
 			).toBe('<span></span><div>Template DIV 1</div><span>Template SPAN 1</span><span></span>');
@@ -894,18 +895,24 @@ describe('Document', () => {
 			`;
 			document.write(html);
 			document.write(html);
-			expect(document.documentElement.outerHTML.replace(/[\s]/gm, '')).toBe(
-				`
-				<html>
-					<head>
+			expect(document.documentElement.outerHTML).toBe(
+				`<html><head>
 						<title>Title</title>
 					</head>
 					<body>
 						<span>Body</span>
+					
+				
+			
+				
+					
+						<title>Title</title>
+					
+					
 						<span>Body</span>
-					</body>
-				</html>
-				`.replace(/[\s]/gm, '')
+					
+				
+			</body></html>`
 			);
 		});
 
@@ -944,6 +951,20 @@ describe('Document', () => {
 				'<html test="1"><head></head><body>Test&gt;</body></html>'
 			);
 		});
+
+		it('Adds <html>, <head>, and <body> tags if they are missing.', () => {
+			const html = `<div>Test</div>`;
+
+			while (document.firstChild) {
+				document.removeChild(document.firstChild);
+			}
+
+			document.write(html);
+
+			expect(document.documentElement.outerHTML).toBe(
+				'<html><head></head><body><div>Test</div></body></html>'
+			);
+		});
 	});
 
 	describe('open()', () => {
@@ -1091,7 +1112,7 @@ describe('Document', () => {
 			const element = <HTMLElement>(
 				document.createElementNS(<string>(<unknown>null), <string>(<unknown>true))
 			);
-			expect(element.tagName).toBe('TRUE');
+			expect(element.tagName).toBe('true');
 		});
 
 		it("Returns HTMLUnknownElement when case doesn't match for an HTML element.", () => {
@@ -1319,11 +1340,11 @@ describe('Document', () => {
 			const child = document.createElement('div');
 			child.className = 'className';
 
-			for (const node of Array.from(document.childNodes)) {
+			for (const node of Array.from(document.body.childNodes)) {
 				(<Node>node.parentNode).removeChild(node);
 			}
 
-			document.appendChild(child);
+			document.body.appendChild(child);
 
 			const clone = document.cloneNode(false);
 			const clone2 = document.cloneNode(true);
@@ -1331,7 +1352,9 @@ describe('Document', () => {
 			expect(clone.defaultView === null).toBe(true);
 			expect(clone.children.length).toBe(0);
 			expect(clone2.children.length).toBe(1);
-			expect(clone2.children[0].outerHTML).toBe('<div class="className"></div>');
+			expect(clone2.children[0].outerHTML).toBe(
+				'<html><head></head><body><div class="className"></div></body></html>'
+			);
 		});
 	});
 
diff --git a/packages/happy-dom/test/nodes/element/Element.test.ts b/packages/happy-dom/test/nodes/element/Element.test.ts
index 0b2a2813b..9374ced1a 100644
--- a/packages/happy-dom/test/nodes/element/Element.test.ts
+++ b/packages/happy-dom/test/nodes/element/Element.test.ts
@@ -1,6 +1,6 @@
 import Window from '../../../src/window/Window.js';
-import XMLSerializer from '../../../src/xml-serializer/XMLSerializer.js';
-import XMLParser from '../../../src/xml-parser/XMLParser.js';
+import HTMLSerializer from '../../../src/html-serializer/HTMLSerializer.js';
+import HTMLParser from '../../../src/html-parser/HTMLParser.js';
 import CustomElement from '../../CustomElement.js';
 import ShadowRoot from '../../../src/nodes/shadow-root/ShadowRoot.js';
 import Document from '../../../src/nodes/document/Document.js';
@@ -263,7 +263,7 @@ describe('Element', () => {
 
 			element.appendChild(div);
 
-			vi.spyOn(XMLSerializer.prototype, 'serializeToString').mockImplementation((rootElement) => {
+			vi.spyOn(HTMLSerializer.prototype, 'serializeToString').mockImplementation((rootElement) => {
 				expect(rootElement).toBe(div);
 				return 'EXPECTED_HTML';
 			});
@@ -295,10 +295,10 @@ describe('Element', () => {
 			element.appendChild(document.createElement('div'));
 			div.appendChild(textNode);
 
-			vi.spyOn(XMLParser, 'parse').mockImplementation(function (ownerDocument, xml, options) {
-				expect(ownerDocument).toBe(document);
-				expect(xml).toBe('SOME_HTML');
-				expect(options).toEqual({ rootNode: element });
+			vi.spyOn(HTMLParser.prototype, 'parse').mockImplementation(function (html, rootNode) {
+				expect(this.window).toBe(window);
+				expect(html).toBe('SOME_HTML');
+				expect(rootNode).toBe(element);
 				element.appendChild(div);
 				return element;
 			});
@@ -402,9 +402,9 @@ describe('Element', () => {
 
 	describe('get childElementCount()', () => {
 		it('Returns child element count.', () => {
-			document.appendChild(document.createElement('div'));
-			document.appendChild(document.createTextNode('test'));
-			expect(document.childElementCount).toEqual(2);
+			document.body.appendChild(document.createElement('div'));
+			document.body.appendChild(document.createTextNode('test'));
+			expect(document.body.childElementCount).toEqual(1);
 		});
 	});
 
@@ -456,7 +456,7 @@ describe('Element', () => {
 
 			element.appendChild(div);
 
-			vi.spyOn(XMLSerializer.prototype, 'serializeToString').mockImplementation((rootElement) => {
+			vi.spyOn(HTMLSerializer.prototype, 'serializeToString').mockImplementation((rootElement) => {
 				expect(rootElement === div).toBe(true);
 				return 'EXPECTED_HTML';
 			});
@@ -479,7 +479,7 @@ describe('Element', () => {
 
 			element.appendChild(div);
 
-			vi.spyOn(XMLSerializer.prototype, 'serializeToString').mockImplementation((rootElement) => {
+			vi.spyOn(HTMLSerializer.prototype, 'serializeToString').mockImplementation((rootElement) => {
 				expect(rootElement === div).toBe(true);
 				return 'EXPECTED_HTML';
 			});
@@ -575,14 +575,14 @@ describe('Element', () => {
 			let isCalled = false;
 
 			vi.spyOn(ParentNodeUtility, 'append').mockImplementation((parentNode, ...nodes) => {
-				expect(parentNode === document).toBe(true);
+				expect(parentNode === document.body).toBe(true);
 				expect(nodes.length).toBe(2);
 				expect(nodes[0] === node1).toBe(true);
 				expect(nodes[1] === node2).toBe(true);
 				isCalled = true;
 			});
 
-			document.append(node1, node2);
+			document.body.append(node1, node2);
 			expect(isCalled).toBe(true);
 		});
 	});
@@ -594,14 +594,14 @@ describe('Element', () => {
 			let isCalled = false;
 
 			vi.spyOn(ParentNodeUtility, 'prepend').mockImplementation((parentNode, ...nodes) => {
-				expect(parentNode === document).toBe(true);
+				expect(parentNode === document.body).toBe(true);
 				expect(nodes.length).toBe(2);
 				expect(nodes[0] === node1).toBe(true);
 				expect(nodes[1] === node2).toBe(true);
 				isCalled = true;
 			});
 
-			document.prepend(node1, node2);
+			document.body.prepend(node1, node2);
 			expect(isCalled).toBe(true);
 		});
 	});
@@ -901,7 +901,7 @@ describe('Element', () => {
 		it('Checks if the element matches with a descendant combinator', () => {
 			const grandparentElement = document.createElement('div');
 			grandparentElement.setAttribute('role', 'alert');
-			document.appendChild(grandparentElement);
+			document.body.appendChild(grandparentElement);
 
 			const parentElement = document.createElement('div');
 			parentElement.setAttribute('role', 'status');
@@ -1678,7 +1678,7 @@ describe('Element', () => {
 			expect(element.shadowRoot instanceof ShadowRoot).toBe(true);
 			expect(element.shadowRoot?.ownerDocument === document).toBe(true);
 			expect(element.shadowRoot?.isConnected).toBe(false);
-			document.appendChild(element);
+			document.body.appendChild(element);
 			expect(element.shadowRoot?.isConnected).toBe(true);
 		});
 
@@ -1688,7 +1688,7 @@ describe('Element', () => {
 			expect(element[PropertySymbol.shadowRoot] instanceof ShadowRoot).toBe(true);
 			expect(element[PropertySymbol.shadowRoot]?.ownerDocument === document).toBe(true);
 			expect(element[PropertySymbol.shadowRoot]?.isConnected).toBe(false);
-			document.appendChild(element);
+			document.body.appendChild(element);
 			expect(element[PropertySymbol.shadowRoot]?.isConnected).toBe(true);
 		});
 	});
diff --git a/packages/happy-dom/test/nodes/element/NamedNodeMap.test.ts b/packages/happy-dom/test/nodes/element/NamedNodeMap.test.ts
index 87067dded..5955efdd3 100644
--- a/packages/happy-dom/test/nodes/element/NamedNodeMap.test.ts
+++ b/packages/happy-dom/test/nodes/element/NamedNodeMap.test.ts
@@ -170,6 +170,27 @@ describe('NamedNodeMap', () => {
 			expect(element.getAttribute('key')).toBe(null);
 		});
 
+		it('Uses the last attribute when multiple attributes have the same name.', () => {
+			element.setAttributeNS('namespace', 'key', 'value1');
+			element.setAttributeNS('namespace', 'key', 'value2');
+			element.setAttributeNS('namespace2', 'key', 'value3');
+			element.setAttributeNS('namespace3', 'key', 'value4');
+
+			expect(element.attributes.getNamedItem('key')?.value).toBe('value2');
+
+			expect(element.attributes.removeNamedItem('key')?.value).toBe('value2');
+
+			expect(element.attributes.getNamedItem('key')?.value).toBe('value3');
+
+			expect(element.attributes.removeNamedItem('key')?.value).toBe('value3');
+
+			expect(element.attributes.getNamedItem('key')?.value).toBe('value4');
+
+			expect(element.attributes.removeNamedItem('key')?.value).toBe('value4');
+
+			expect(element.attributes.getNamedItem('key')).toBe(null);
+		});
+
 		it('Throws a NotFoundError on a missing attribute.', () => {
 			let error: Error | null = null;
 			try {
diff --git a/packages/happy-dom/test/nodes/html-element/HTMLElement.test.ts b/packages/happy-dom/test/nodes/html-element/HTMLElement.test.ts
index ea4375257..dccc01064 100644
--- a/packages/happy-dom/test/nodes/html-element/HTMLElement.test.ts
+++ b/packages/happy-dom/test/nodes/html-element/HTMLElement.test.ts
@@ -591,10 +591,14 @@ describe('HTMLElement', () => {
 
 			expect(customElement.childNodes.length).toBe(2);
 			expect(customElement.childNodes[0]).toBe(child1);
+			expect(customElement.childNodes[0].parentNode).toBe(customElement);
 			expect(customElement.childNodes[1]).toBe(child2);
+			expect(customElement.childNodes[1].parentNode).toBe(customElement);
 			expect(customElement.children.length).toBe(2);
 			expect(customElement.children[0]).toBe(child1);
+			expect(customElement.children[0].parentNode).toBe(customElement);
 			expect(customElement.children[1]).toBe(child2);
+			expect(customElement.children[1].parentNode).toBe(customElement);
 			expect(customElement[PropertySymbol.rootNode] === rootNode).toBe(true);
 			expect(customElement[PropertySymbol.formNode] === formNode).toBe(true);
 			expect(customElement[PropertySymbol.selectNode] === selectNode).toBe(true);
diff --git a/packages/happy-dom/test/nodes/html-iframe-element/HTMLIFrameElement.test.ts b/packages/happy-dom/test/nodes/html-iframe-element/HTMLIFrameElement.test.ts
index 0c3bddcd4..57304053b 100644
--- a/packages/happy-dom/test/nodes/html-iframe-element/HTMLIFrameElement.test.ts
+++ b/packages/happy-dom/test/nodes/html-iframe-element/HTMLIFrameElement.test.ts
@@ -178,7 +178,7 @@ describe('HTMLIFrameElement', () => {
 				element.addEventListener('load', () => {
 					resolve(page.mainFrame.childFrames[0].url);
 				});
-				document.appendChild(element);
+				document.body.appendChild(element);
 			});
 			expect(url).toBe('about:srcdoc');
 		});
diff --git a/packages/happy-dom/test/nodes/html-label-element/HTMLLabelElement.test.ts b/packages/happy-dom/test/nodes/html-label-element/HTMLLabelElement.test.ts
index 9f7302738..0809f314b 100644
--- a/packages/happy-dom/test/nodes/html-label-element/HTMLLabelElement.test.ts
+++ b/packages/happy-dom/test/nodes/html-label-element/HTMLLabelElement.test.ts
@@ -43,8 +43,8 @@ describe('HTMLLabelElement', () => {
 			const input = document.createElement('input');
 			input.id = 'inputId';
 			element.htmlFor = 'inputId';
-			document.appendChild(input);
-			document.appendChild(element);
+			document.body.appendChild(input);
+			document.body.appendChild(element);
 			expect(element.control === input).toBe(true);
 		});
 
diff --git a/packages/happy-dom/test/nodes/html-script-element/HTMLScriptElement.test.ts b/packages/happy-dom/test/nodes/html-script-element/HTMLScriptElement.test.ts
index c74cc5970..85c9c957f 100644
--- a/packages/happy-dom/test/nodes/html-script-element/HTMLScriptElement.test.ts
+++ b/packages/happy-dom/test/nodes/html-script-element/HTMLScriptElement.test.ts
@@ -175,69 +175,75 @@ describe('HTMLScriptElement', () => {
 			expect(window['currentScript']).toBe(element);
 		});
 
-		it('Loads external script asynchronously.', async () => {
-			let fetchedURL: string | null = null;
-			let loadEvent: Event | null = null;
-			let loadEventTarget: EventTarget | null = null;
-			let loadEventCurrentTarget: EventTarget | null = null;
-
-			vi.spyOn(Fetch.prototype, 'send').mockImplementation(async function () {
-				fetchedURL = this.request.url;
-				return <Response>{
-					text: async () =>
-						'globalThis.test = "test";globalThis.currentScript = document.currentScript;',
-					ok: true
-				};
+		for (const attribute of [
+			{ name: 'async', value: '' },
+			{ name: 'defer', value: '' },
+			{ name: 'type', value: 'module' }
+		]) {
+			it(`Loads external script asynchronously when the attribute "${attribute.name}" is set to "${attribute.value}".`, async () => {
+				let fetchedURL: string | null = null;
+				let loadEvent: Event | null = null;
+				let loadEventTarget: EventTarget | null = null;
+				let loadEventCurrentTarget: EventTarget | null = null;
+
+				vi.spyOn(Fetch.prototype, 'send').mockImplementation(async function () {
+					fetchedURL = this.request.url;
+					return <Response>{
+						text: async () =>
+							'globalThis.test = "test";globalThis.currentScript = document.currentScript;',
+						ok: true
+					};
+				});
+
+				const script = <HTMLScriptElement>window.document.createElement('script');
+				script.src = 'https://localhost:8080/path/to/script.js';
+				script.setAttribute(attribute.name, attribute.value);
+				script.addEventListener('load', (event) => {
+					loadEvent = event;
+					loadEventTarget = event.target;
+					loadEventCurrentTarget = event.currentTarget;
+				});
+
+				document.body.appendChild(script);
+
+				await window.happyDOM?.waitUntilComplete();
+
+				expect((<Event>(<unknown>loadEvent)).target).toBe(null);
+				expect(loadEventTarget).toBe(script);
+				expect(loadEventCurrentTarget).toBe(script);
+				expect(fetchedURL).toBe('https://localhost:8080/path/to/script.js');
+				expect(window['test']).toBe('test');
+				expect(window['currentScript']).toBe(script);
 			});
 
-			const script = <HTMLScriptElement>window.document.createElement('script');
-			script.src = 'https://localhost:8080/path/to/script.js';
-			script.async = true;
-			script.addEventListener('load', (event) => {
-				loadEvent = event;
-				loadEventTarget = event.target;
-				loadEventCurrentTarget = event.currentTarget;
-			});
+			it(`Triggers error event when loading external script asynchronously when the attribute "${attribute.name}" is set to "${attribute.value}".`, async () => {
+				let errorEvent: ErrorEvent | null = null;
 
-			document.body.appendChild(script);
+				vi.spyOn(Fetch.prototype, 'send').mockImplementation(
+					async () => <Response>(<unknown>{
+							text: () => null,
+							ok: false,
+							status: 404,
+							statusText: 'Not Found'
+						})
+				);
 
-			await window.happyDOM?.waitUntilComplete();
+				const script = <HTMLScriptElement>window.document.createElement('script');
+				script.src = 'https://localhost:8080/path/to/script.js';
+				script.setAttribute(attribute.name, attribute.value);
+				script.addEventListener('error', (event) => {
+					errorEvent = <ErrorEvent>event;
+				});
 
-			expect((<Event>(<unknown>loadEvent)).target).toBe(null);
-			expect(loadEventTarget).toBe(script);
-			expect(loadEventCurrentTarget).toBe(script);
-			expect(fetchedURL).toBe('https://localhost:8080/path/to/script.js');
-			expect(window['test']).toBe('test');
-			expect(window['currentScript']).toBe(script);
-		});
+				document.body.appendChild(script);
 
-		it('Triggers error event when loading external script asynchronously.', async () => {
-			let errorEvent: ErrorEvent | null = null;
+				await window.happyDOM?.waitUntilComplete();
 
-			vi.spyOn(Fetch.prototype, 'send').mockImplementation(
-				async () => <Response>(<unknown>{
-						text: () => null,
-						ok: false,
-						status: 404,
-						statusText: 'Not Found'
-					})
-			);
-
-			const script = <HTMLScriptElement>window.document.createElement('script');
-			script.src = 'https://localhost:8080/path/to/script.js';
-			script.async = true;
-			script.addEventListener('error', (event) => {
-				errorEvent = <ErrorEvent>event;
+				expect((<ErrorEvent>(<unknown>errorEvent)).message).toBe(
+					'Failed to perform request to "https://localhost:8080/path/to/script.js". Status 404 Not Found.'
+				);
 			});
-
-			document.body.appendChild(script);
-
-			await window.happyDOM?.waitUntilComplete();
-
-			expect((<ErrorEvent>(<unknown>errorEvent)).message).toBe(
-				'Failed to perform request to "https://localhost:8080/path/to/script.js". Status 404 Not Found.'
-			);
-		});
+		}
 
 		it('Loads external script synchronously with relative URL.', async () => {
 			const window = new Window({ url: 'https://localhost:8080/base/' });
@@ -261,7 +267,7 @@ describe('HTMLScriptElement', () => {
 				loadEventCurrentTarget = event.currentTarget;
 			});
 
-			document.body.appendChild(script);
+			window.document.body.appendChild(script);
 
 			expect((<Event>(<unknown>loadEvent)).target).toBe(null);
 			expect(loadEventTarget).toBe(script);
@@ -287,7 +293,7 @@ describe('HTMLScriptElement', () => {
 				errorEvent = <ErrorEvent>event;
 			});
 
-			document.body.appendChild(script);
+			window.document.body.appendChild(script);
 
 			expect((<ErrorEvent>(<unknown>errorEvent)).message).toBe('error');
 			expect((<ErrorEvent>(<unknown>errorEvent)).error).toBe(thrownError);
@@ -329,10 +335,15 @@ describe('HTMLScriptElement', () => {
 			expect(window['test']).toBe('test');
 		});
 
-		it('Evaluates the text content as code when using DOMParser.parseFromString().', () => {
+		it("Doesn't evaluate the text content as code when using DOMParser.parseFromString().", () => {
 			const domParser = new window.DOMParser();
-			domParser.parseFromString('<script>globalThis.test = "test";</script>', 'text/html');
-			expect(window['test']).toBe('test');
+			const result = domParser.parseFromString(
+				'<script>globalThis.test = "test";</script>',
+				'text/html'
+			);
+			expect(window['test']).toBe(undefined);
+			document.body.appendChild(result);
+			expect(window['test']).toBe(undefined);
 		});
 
 		it('Loads and evaluates an external script when "src" attribute has been set, but does not evaluate text content.', () => {
diff --git a/packages/happy-dom/test/nodes/html-table-element/HTMLTableElement.test.ts b/packages/happy-dom/test/nodes/html-table-element/HTMLTableElement.test.ts
index b1552ad9d..9c17395de 100644
--- a/packages/happy-dom/test/nodes/html-table-element/HTMLTableElement.test.ts
+++ b/packages/happy-dom/test/nodes/html-table-element/HTMLTableElement.test.ts
@@ -231,10 +231,13 @@ describe('HTMLTableElement', () => {
 		it('Returns an HTMLCollection of <tr> elements', () => {
 			expect(element.rows).instanceOf(HTMLCollection);
 			expect(element.rows.length).toBe(0);
-			element.innerHTML = '<div><tr><td>test</td></tr><tr><td>test</td></tr></div>';
-			expect(element.rows.length).toBe(2);
+			element.innerHTML =
+				'<tbody><tr><td>test</td></tr><tr><td>test</td></tr></tbody><tbody><tr><td>test</td></tr><tr><td>test</td></tr></tbody>';
+			expect(element.rows.length).toBe(4);
 			expect(element.rows[0]).toBe(element.children[0].children[0]);
 			expect(element.rows[1]).toBe(element.children[0].children[1]);
+			expect(element.rows[2]).toBe(element.children[1].children[0]);
+			expect(element.rows[3]).toBe(element.children[1].children[1]);
 		});
 	});
 
@@ -243,10 +246,10 @@ describe('HTMLTableElement', () => {
 			expect(element.tBodies).instanceOf(HTMLCollection);
 			expect(element.tBodies.length).toBe(0);
 			element.innerHTML =
-				'<div><tbody><tr><td>test</td></tr></tbody><tbody><tr><td>test</td></tr></tbody></div>';
+				'<tbody><tr><td>test</td></tr></tbody><tbody><tr><td>test</td></tr></tbody>';
 			expect(element.tBodies.length).toBe(2);
-			expect(element.tBodies[0]).toBe(element.children[0].children[0]);
-			expect(element.tBodies[1]).toBe(element.children[0].children[1]);
+			expect(element.tBodies[0]).toBe(element.children[0]);
+			expect(element.tBodies[1]).toBe(element.children[1]);
 		});
 	});
 
@@ -319,7 +322,10 @@ describe('HTMLTableElement', () => {
 			element.innerHTML =
 				'<div><tbody><tr><td>test</td></tr></tbody><tbody><tr><td>test</td></tr></tbody></div>';
 			const tbody = element.createTBody();
-			expect(element.childNodes[0].childNodes[2]).toBe(tbody);
+			expect(element.children[3]).toBe(tbody);
+			expect(element.innerHTML).toBe(
+				'<div></div><tbody><tr><td>test</td></tr></tbody><tbody><tr><td>test</td></tr></tbody><tbody></tbody>'
+			);
 		});
 
 		it('Inserts the tbody as the last child if there are no <tbody>', () => {
@@ -355,34 +361,47 @@ describe('HTMLTableElement', () => {
 	describe('insertRow()', () => {
 		it('Inserts a new row at the end', () => {
 			const row = element.insertRow();
-			expect(element.childNodes[0]).toBe(row);
-			element.innerHTML = '<div><tr><td>test</td></tr></div>';
+			expect(element.children[0].children[0]).toBe(row);
+			expect(element.innerHTML).toBe('<tbody><tr></tr></tbody>');
 			const row2 = element.insertRow();
-			expect(element.childNodes[1]).toBe(row2);
+			expect(element.children[0].children[1]).toBe(row2);
+			expect(element.innerHTML).toBe('<tbody><tr></tr><tr></tr></tbody>');
 		});
 
 		it('Inserts a new row at the given index', () => {
 			element.innerHTML = '<div><tr><td>test</td></tr><tr><td>test</td></tr></div>';
 			const row = element.insertRow(1);
-			expect(element.childNodes[0].childNodes[1]).toBe(row);
+			expect(element.children[1].children[1]).toBe(row);
+			expect(element.innerHTML).toBe(
+				'<div></div><tbody><tr><td>test</td></tr><tr></tr><tr><td>test</td></tr></tbody>'
+			);
 		});
 
 		it('Inserts a new row at the end if the index is -1', () => {
 			element.innerHTML = '<tr><td>test</td></tr><tr><td>test</td></tr>';
 			const row = element.insertRow(-1);
-			expect(element.childNodes[2]).toBe(row);
+			expect(element.children[0].children[2]).toBe(row);
+			expect(element.innerHTML).toBe(
+				'<tbody><tr><td>test</td></tr><tr><td>test</td></tr><tr></tr></tbody>'
+			);
 		});
 
 		it('Inserts a new row at the end if the index is not a number', () => {
 			element.innerHTML = '<tr><td>test</td></tr><tr><td>test</td></tr>';
 			const row = element.insertRow(<number>(<unknown>'test'));
-			expect(element.childNodes[2]).toBe(row);
+			expect(element.children[0].children[2]).toBe(row);
+			expect(element.innerHTML).toBe(
+				'<tbody><tr><td>test</td></tr><tr><td>test</td></tr><tr></tr></tbody>'
+			);
 		});
 
 		it('Inserts a new row at the end if the index is equal to the length of rows', () => {
-			element.innerHTML = '<tr><td>test</td></tr><tr><td>test</td></tr>';
+			element.innerHTML = '<tbody><tr><td>test</td></tr><tr><td>test</td></tr></tbody>';
 			const row = element.insertRow(2);
-			expect(element.childNodes[2]).toBe(row);
+			expect(element.children[0].children[2]).toBe(row);
+			expect(element.innerHTML).toBe(
+				'<tbody><tr><td>test</td></tr><tr><td>test</td></tr><tr></tr></tbody>'
+			);
 		});
 
 		it('Throws an error if the index is less than -1', () => {
@@ -407,22 +426,28 @@ describe('HTMLTableElement', () => {
 		it('Removes the row at the given index', () => {
 			element.innerHTML = '<tr><td>Row 1</td></tr><tr><td>Row 2</td></tr><tr><td>Row 3</td></tr>';
 			element.deleteRow(1);
-			expect(element.childNodes.length).toBe(2);
-			expect(element.innerHTML).toBe('<tr><td>Row 1</td></tr><tr><td>Row 3</td></tr>');
+			expect(element.children[0].children.length).toBe(2);
+			expect(element.innerHTML).toBe(
+				'<tbody><tr><td>Row 1</td></tr><tr><td>Row 3</td></tr></tbody>'
+			);
 		});
 
 		it('Removes the last row if the index is -1', () => {
 			element.innerHTML = '<tr><td>Row 1</td></tr><tr><td>Row 2</td></tr><tr><td>Row 3</td></tr>';
 			element.deleteRow(-1);
-			expect(element.childNodes.length).toBe(2);
-			expect(element.innerHTML).toBe('<tr><td>Row 1</td></tr><tr><td>Row 2</td></tr>');
+			expect(element.children[0].children.length).toBe(2);
+			expect(element.innerHTML).toBe(
+				'<tbody><tr><td>Row 1</td></tr><tr><td>Row 2</td></tr></tbody>'
+			);
 		});
 
 		it('Removes the last row if the index is not a number', () => {
 			element.innerHTML = '<tr><td>Row 1</td></tr><tr><td>Row 2</td></tr><tr><td>Row 3</td></tr>';
 			element.deleteRow(<number>(<unknown>'test'));
-			expect(element.childNodes.length).toBe(2);
-			expect(element.innerHTML).toBe('<tr><td>Row 1</td></tr><tr><td>Row 2</td></tr>');
+			expect(element.children[0].children.length).toBe(2);
+			expect(element.innerHTML).toBe(
+				'<tbody><tr><td>Row 1</td></tr><tr><td>Row 2</td></tr></tbody>'
+			);
 		});
 
 		it('Throws an error if the index is less than -1', () => {
diff --git a/packages/happy-dom/test/nodes/html-table-row-element/HTMLTableRowElement.test.ts b/packages/happy-dom/test/nodes/html-table-row-element/HTMLTableRowElement.test.ts
index cb06df4b8..fc7e2817a 100644
--- a/packages/happy-dom/test/nodes/html-table-row-element/HTMLTableRowElement.test.ts
+++ b/packages/happy-dom/test/nodes/html-table-row-element/HTMLTableRowElement.test.ts
@@ -26,10 +26,11 @@ describe('HTMLTableRowElement', () => {
 			expect(element.cells).instanceOf(HTMLCollection);
 			expect(element.cells.length).toBe(0);
 			element.innerHTML = '<div><th></th><td></td><th></th></div>';
+			expect(element.innerHTML).toBe('<div></div><th></th><td></td><th></th>');
 			expect(element.cells.length).toBe(3);
-			expect(element.cells[0]).toBe(element.children[0].children[0]);
-			expect(element.cells[1]).toBe(element.children[0].children[1]);
-			expect(element.cells[2]).toBe(element.children[0].children[2]);
+			expect(element.cells[0]).toBe(element.children[1]);
+			expect(element.cells[1]).toBe(element.children[2]);
+			expect(element.cells[2]).toBe(element.children[3]);
 		});
 	});
 
@@ -69,15 +70,26 @@ describe('HTMLTableRowElement', () => {
 		it('Inserts a new cell at the end', () => {
 			const cell = element.insertCell();
 			expect(element.childNodes[0]).toBe(cell);
+			expect(element.innerHTML).toBe('<td></td>');
+
 			element.innerHTML = '<div><td>test</td></div>';
+			expect(element.innerHTML).toBe('<div></div><td>test</td>');
 			const cell2 = element.insertCell();
-			expect(element.childNodes[1]).toBe(cell2);
+			expect(element.childNodes[2]).toBe(cell2);
+			expect(element.innerHTML).toBe('<div></div><td>test</td><td></td>');
+
+			element.innerHTML = '<th>test</th>';
+			expect(element.innerHTML).toBe('<th>test</th>');
+			const cell3 = element.insertCell();
+			expect(element.childNodes[1]).toBe(cell3);
+			expect(element.innerHTML).toBe('<th>test</th><td></td>');
 		});
 
 		it('Inserts a new cell at the given index', () => {
 			element.innerHTML = '<div><td>test</td><td>test</td></div>';
 			const cell = element.insertCell(1);
-			expect(element.childNodes[0].childNodes[1]).toBe(cell);
+			expect(element.childNodes[2]).toBe(cell);
+			expect(element.innerHTML).toBe('<div></div><td>test</td><td></td><td>test</td>');
 		});
 
 		it('Inserts a new cell at the end if the index is -1', () => {
diff --git a/packages/happy-dom/test/nodes/html-template-element/HTMLTemplateElement.test.ts b/packages/happy-dom/test/nodes/html-template-element/HTMLTemplateElement.test.ts
index 4cc03a8e4..608c1be57 100644
--- a/packages/happy-dom/test/nodes/html-template-element/HTMLTemplateElement.test.ts
+++ b/packages/happy-dom/test/nodes/html-template-element/HTMLTemplateElement.test.ts
@@ -1,7 +1,7 @@
 import Window from '../../../src/window/Window.js';
 import Document from '../../../src/nodes/document/Document.js';
 import HTMLTemplateElement from '../../../src/nodes/html-template-element/HTMLTemplateElement.js';
-import XMLSerializer from '../../../src/xml-serializer/XMLSerializer.js';
+import HTMLSerializer from '../../../src/html-serializer/HTMLSerializer.js';
 import { beforeEach, afterEach, describe, it, expect, vi } from 'vitest';
 import CustomElement from '../../CustomElement.js';
 
@@ -40,7 +40,7 @@ describe('HTMLTemplateElement', () => {
 
 			expect(element.childNodes.length).toBe(0);
 			expect(element.innerHTML).toBe('<div>Test</div>');
-			expect(new XMLSerializer().serializeToString(element.content)).toBe('<div>Test</div>');
+			expect(new HTMLSerializer().serializeToString(element.content)).toBe('<div>Test</div>');
 
 			element.removeChild(div);
 
@@ -58,7 +58,7 @@ describe('HTMLTemplateElement', () => {
 
 			expect(element.childNodes.length).toBe(0);
 			expect(element.innerHTML).toBe('<div>Test</div>');
-			expect(new XMLSerializer().serializeToString(element.content)).toBe('<div>Test</div>');
+			expect(new HTMLSerializer().serializeToString(element.content)).toBe('<div>Test</div>');
 
 			element.innerHTML = '';
 
@@ -130,7 +130,7 @@ describe('HTMLTemplateElement', () => {
 
 			expect(element.childNodes.length).toBe(0);
 			expect(element.getInnerHTML()).toBe('<div>Test</div>');
-			expect(new XMLSerializer().serializeToString(element.content)).toBe('<div>Test</div>');
+			expect(new HTMLSerializer().serializeToString(element.content)).toBe('<div>Test</div>');
 
 			element.removeChild(div);
 
@@ -162,7 +162,7 @@ describe('HTMLTemplateElement', () => {
 
 			expect(element.childNodes.length).toBe(0);
 			expect(element.getHTML()).toBe('<div>Test</div>');
-			expect(new XMLSerializer().serializeToString(element.content)).toBe('<div>Test</div>');
+			expect(new HTMLSerializer().serializeToString(element.content)).toBe('<div>Test</div>');
 
 			element.removeChild(div);
 
diff --git a/packages/happy-dom/test/nodes/node/Node.test.ts b/packages/happy-dom/test/nodes/node/Node.test.ts
index d18145aea..5a5e2b0a7 100644
--- a/packages/happy-dom/test/nodes/node/Node.test.ts
+++ b/packages/happy-dom/test/nodes/node/Node.test.ts
@@ -250,6 +250,7 @@ describe('Node', () => {
 
 		it('Returns null if parent node is not an element.', () => {
 			const htmlElement = document.createElement('html');
+			document.removeChild(document.children[0]);
 			document.appendChild(htmlElement);
 
 			expect(htmlElement.parentNode).toBe(document);
@@ -305,13 +306,13 @@ describe('Node', () => {
 			};
 
 			document.body.appendChild(customElement);
+			document.body.removeChild(customElement);
 
-			expect(isConnected).toBe(true);
+			// Should not be called as the callbacks are stored in the definition when the element is defined
+			expect(isConnected).toBe(false);
 			expect(isDisconnected).toBe(false);
 
-			document.body.removeChild(customElement);
-
-			expect(isDisconnected).toBe(true);
+			expect(customElementOutput).toEqual(['Counter:connected', 'Counter:disconnected']);
 		});
 	});
 
@@ -536,6 +537,19 @@ describe('Node', () => {
 			expect(parent.childNodes.length).toBe(1);
 			expect(parent.childNodes[0]).toBe(child);
 		});
+
+		it('Sets ownerDocument on the child node.', () => {
+			const parent = document.createElement('div');
+			const domParser = new window.DOMParser();
+			const newDocument = domParser.parseFromString('<span></span>', 'text/html');
+			const span = <Node>newDocument.querySelector('span');
+
+			expect(span.ownerDocument === newDocument).toBe(true);
+
+			parent.appendChild(span);
+
+			expect(span.ownerDocument === document).toBe(true);
+		});
 	});
 
 	describe('removeChild()', () => {
@@ -754,6 +768,21 @@ describe('Node', () => {
 			expect(parent.childNodes[0]).toBe(newNode);
 			expect(parent.childNodes[1]).toBe(referenceNode);
 		});
+
+		it('Sets ownerDocument on the child node.', () => {
+			const parent = document.createElement('div');
+			const article = document.createElement('article');
+			const domParser = new window.DOMParser();
+			const newDocument = domParser.parseFromString('<span></span>', 'text/html');
+			const span = <Node>newDocument.querySelector('span');
+
+			expect(span.ownerDocument === newDocument).toBe(true);
+
+			parent.appendChild(article);
+			parent.insertBefore(span, article);
+
+			expect(span.ownerDocument === document).toBe(true);
+		});
 	});
 
 	describe('replaceChild()', () => {
@@ -1232,12 +1261,12 @@ describe('Node', () => {
 			expect(b.childNodes).toHaveLength(0);
 		});
 
-		it('Normalizes the document.', () => {
-			const count = document.childNodes.length;
-			document.append(document.createTextNode(''));
-			expect(document.childNodes).toHaveLength(count + 1);
-			document.normalize();
-			expect(document.childNodes).toHaveLength(count);
+		it('Normalizes the child nodes.', () => {
+			const count = document.body.childNodes.length;
+			document.body.append(document.createTextNode(''));
+			expect(document.body.childNodes).toHaveLength(count + 1);
+			document.body.normalize();
+			expect(document.body.childNodes).toHaveLength(count);
 		});
 
 		it('Does nothing on a text node.', () => {
diff --git a/packages/happy-dom/test/nodes/node/NodeUtility.test.ts b/packages/happy-dom/test/nodes/node/NodeUtility.test.ts
index 4fe7f6e2b..8c7346b28 100644
--- a/packages/happy-dom/test/nodes/node/NodeUtility.test.ts
+++ b/packages/happy-dom/test/nodes/node/NodeUtility.test.ts
@@ -123,11 +123,12 @@ describe('NodeUtility', () => {
 		it('Returns false if lists does not have same length', () => {
 			const element1 = document.createElement('div');
 			const element2 = document.createElement('div');
-			const attrFoo = document.createAttribute('data-foo');
+			const attrFoo1 = document.createAttribute('data-foo');
+			const attrFoo2 = document.createAttribute('data-foo');
 			const attrBar = document.createAttribute('data-bar');
 
-			element1.setAttributeNode(attrFoo);
-			element2.setAttributeNode(attrFoo);
+			element1.setAttributeNode(attrFoo1);
+			element2.setAttributeNode(attrFoo2);
 			element1.setAttributeNode(attrBar);
 
 			expect(NodeUtility.attributeListsEqual(element1, element2)).toEqual(false);
@@ -136,13 +137,14 @@ describe('NodeUtility', () => {
 		it('Returns false if lists are not equal', () => {
 			const element1 = document.createElement('div');
 			const element2 = document.createElement('div');
-			const attrFoo = document.createAttribute('data-foo');
+			const attrFoo1 = document.createAttribute('data-foo');
+			const attrFoo2 = document.createAttribute('data-foo');
 			const attrBar = document.createAttribute('data-bar');
 			const attrLorem = document.createAttribute('data-lorem');
 
-			element1.setAttributeNode(attrFoo);
+			element1.setAttributeNode(attrFoo1);
 			element1.setAttributeNode(attrBar);
-			element2.setAttributeNode(attrFoo);
+			element2.setAttributeNode(attrFoo2);
 			element2.setAttributeNode(attrLorem);
 
 			expect(NodeUtility.attributeListsEqual(element1, element2)).toEqual(false);
@@ -151,10 +153,11 @@ describe('NodeUtility', () => {
 		it('Returns true if attribute lists are equal', () => {
 			const element1 = document.createElement('div');
 			const element2 = document.createElement('div');
-			const attrFoo = document.createAttribute('data-foo');
+			const attrFoo1 = document.createAttribute('data-foo');
+			const attrFoo2 = document.createAttribute('data-foo');
 
-			element1.setAttributeNode(attrFoo);
-			element2.setAttributeNode(attrFoo);
+			element1.setAttributeNode(attrFoo1);
+			element2.setAttributeNode(attrFoo2);
 
 			expect(NodeUtility.attributeListsEqual(element1, element2)).toEqual(true);
 		});
diff --git a/packages/happy-dom/test/query-selector/QuerySelector.test.ts b/packages/happy-dom/test/query-selector/QuerySelector.test.ts
index 2a561b406..e89dbec51 100644
--- a/packages/happy-dom/test/query-selector/QuerySelector.test.ts
+++ b/packages/happy-dom/test/query-selector/QuerySelector.test.ts
@@ -1382,7 +1382,7 @@ describe('QuerySelector', () => {
 			const headline = document.createElement('h2');
 			headline.id = 'id';
 			section.appendChild(headline);
-			document.appendChild(section);
+			document.body.appendChild(section);
 
 			window.location.hash = '#id';
 			expect(section.querySelector(':target') === headline).toBe(true);
diff --git a/packages/happy-dom/test/tree-walker/NodeIterator.test.ts b/packages/happy-dom/test/tree-walker/NodeIterator.test.ts
index 72be95acd..9619dea56 100644
--- a/packages/happy-dom/test/tree-walker/NodeIterator.test.ts
+++ b/packages/happy-dom/test/tree-walker/NodeIterator.test.ts
@@ -6,7 +6,6 @@ import Comment from '../../src/nodes/comment/Comment.js';
 import Node from '../../src/nodes/node/Node.js';
 import TreeWalkerHTML from './data/TreeWalkerHTML.js';
 import { beforeEach, describe, it, expect } from 'vitest';
-import Node from '../../src/nodes/node/Node.js';
 
 const NODE_TO_STRING = (node: Node): string => {
 	if (node instanceof Element) {
@@ -38,6 +37,7 @@ describe('NodeIterator', () => {
 			}
 
 			expect(html).toEqual([
+				'<body>\n\t\t\t<div class="class1 class2" id="id">\n\t\t\t\t<!-- Comment 1 !-->\n\t\t\t\t<b>Bold</b>\n\t\t\t\t<!-- Comment 2 !-->\n\t\t\t\t<span>Span</span>\n\t\t\t</div>\n\t\t\t<article class="class1 class2" id="id">\n\t\t\t\t<!-- Comment 1 !-->\n\t\t\t\t<b>Bold</b>\n\t\t\t\t<!-- Comment 2 !-->\n\t\t\t</article>\n\t\t\n\t</body>',
 				'\n\t\t\t',
 				'<div class="class1 class2" id="id">\n\t\t\t\t<!-- Comment 1 !-->\n\t\t\t\t<b>Bold</b>\n\t\t\t\t<!-- Comment 2 !-->\n\t\t\t\t<span>Span</span>\n\t\t\t</div>',
 				'\n\t\t\t\t',
@@ -61,7 +61,7 @@ describe('NodeIterator', () => {
 				'\n\t\t\t\t',
 				'<!-- Comment 2 !-->',
 				'\n\t\t\t',
-				'\n\t\t'
+				'\n\t\t\n\t'
 			]);
 		});
 
@@ -75,6 +75,7 @@ describe('NodeIterator', () => {
 			}
 
 			expect(html).toEqual([
+				'<body>\n\t\t\t<div class="class1 class2" id="id">\n\t\t\t\t<!-- Comment 1 !-->\n\t\t\t\t<b>Bold</b>\n\t\t\t\t<!-- Comment 2 !-->\n\t\t\t\t<span>Span</span>\n\t\t\t</div>\n\t\t\t<article class="class1 class2" id="id">\n\t\t\t\t<!-- Comment 1 !-->\n\t\t\t\t<b>Bold</b>\n\t\t\t\t<!-- Comment 2 !-->\n\t\t\t</article>\n\t\t\n\t</body>',
 				'<div class="class1 class2" id="id">\n\t\t\t\t<!-- Comment 1 !-->\n\t\t\t\t<b>Bold</b>\n\t\t\t\t<!-- Comment 2 !-->\n\t\t\t\t<span>Span</span>\n\t\t\t</div>',
 				'<b>Bold</b>',
 				'<span>Span</span>',
@@ -96,6 +97,7 @@ describe('NodeIterator', () => {
 			}
 
 			expect(html).toEqual([
+				'<body>\n\t\t\t<div class="class1 class2" id="id">\n\t\t\t\t<!-- Comment 1 !-->\n\t\t\t\t<b>Bold</b>\n\t\t\t\t<!-- Comment 2 !-->\n\t\t\t\t<span>Span</span>\n\t\t\t</div>\n\t\t\t<article class="class1 class2" id="id">\n\t\t\t\t<!-- Comment 1 !-->\n\t\t\t\t<b>Bold</b>\n\t\t\t\t<!-- Comment 2 !-->\n\t\t\t</article>\n\t\t\n\t</body>',
 				'<div class="class1 class2" id="id">\n\t\t\t\t<!-- Comment 1 !-->\n\t\t\t\t<b>Bold</b>\n\t\t\t\t<!-- Comment 2 !-->\n\t\t\t\t<span>Span</span>\n\t\t\t</div>',
 				'<!-- Comment 1 !-->',
 				'<b>Bold</b>',
@@ -121,6 +123,7 @@ describe('NodeIterator', () => {
 			}
 
 			expect(html).toEqual([
+				'<body>\n\t\t\t<div class="class1 class2" id="id">\n\t\t\t\t<!-- Comment 1 !-->\n\t\t\t\t<b>Bold</b>\n\t\t\t\t<!-- Comment 2 !-->\n\t\t\t\t<span>Span</span>\n\t\t\t</div>\n\t\t\t<article class="class1 class2" id="id">\n\t\t\t\t<!-- Comment 1 !-->\n\t\t\t\t<b>Bold</b>\n\t\t\t\t<!-- Comment 2 !-->\n\t\t\t</article>\n\t\t\n\t</body>',
 				'<div class="class1 class2" id="id">\n\t\t\t\t<!-- Comment 1 !-->\n\t\t\t\t<b>Bold</b>\n\t\t\t\t<!-- Comment 2 !-->\n\t\t\t\t<span>Span</span>\n\t\t\t</div>',
 				'<b>Bold</b>',
 				'<span>Span</span>',
@@ -131,7 +134,7 @@ describe('NodeIterator', () => {
 
 		it('Rejects the two first nodes when provided filter function returns NodeFilter.FILTER_REJECT on the two first nodes.', () => {
 			let rejected = 0;
-			const NodeIterator = document.createNodeIterator(document.body, NodeFilter.SHOW_ALL, {
+			const nodeIterator = document.createNodeIterator(document.body, NodeFilter.SHOW_ALL, {
 				acceptNode: () => {
 					if (rejected < 2) {
 						rejected++;
@@ -143,11 +146,23 @@ describe('NodeIterator', () => {
 			const html: string[] = [];
 			let currentNode;
 
-			while ((currentNode = NodeIterator.nextNode())) {
+			while ((currentNode = nodeIterator.nextNode())) {
 				html.push(NODE_TO_STRING(currentNode));
 			}
 
 			expect(html).toEqual([
+				'<div class="class1 class2" id="id">\n\t\t\t\t<!-- Comment 1 !-->\n\t\t\t\t<b>Bold</b>\n\t\t\t\t<!-- Comment 2 !-->\n\t\t\t\t<span>Span</span>\n\t\t\t</div>',
+				'\n\t\t\t\t',
+				'<!-- Comment 1 !-->',
+				'\n\t\t\t\t',
+				'<b>Bold</b>',
+				'Bold',
+				'\n\t\t\t\t',
+				'<!-- Comment 2 !-->',
+				'\n\t\t\t\t',
+				'<span>Span</span>',
+				'Span',
+				'\n\t\t\t',
 				'\n\t\t\t',
 				'<article class="class1 class2" id="id">\n\t\t\t\t<!-- Comment 1 !-->\n\t\t\t\t<b>Bold</b>\n\t\t\t\t<!-- Comment 2 !-->\n\t\t\t</article>',
 				'\n\t\t\t\t',
@@ -158,23 +173,23 @@ describe('NodeIterator', () => {
 				'\n\t\t\t\t',
 				'<!-- Comment 2 !-->',
 				'\n\t\t\t',
-				'\n\t\t'
+				'\n\t\t\n\t'
 			]);
 		});
 	});
 
 	describe('previousNode()', () => {
 		it('Returns the previous node when executed after a nextNode() call.', () => {
-			const NodeIterator = document.createNodeIterator(document.body);
+			const nodeIterator = document.createNodeIterator(document.body);
 			let expectedPreviousNode: Node | null = null;
 			let previousNode: Node | null = null;
 			let currentNode: Node | null = null;
 
-			while ((currentNode = NodeIterator.nextNode())) {
+			while ((currentNode = nodeIterator.nextNode())) {
 				if (previousNode) {
-					previousNode = NodeIterator.previousNode();
+					previousNode = nodeIterator.previousNode();
 					expect(previousNode === expectedPreviousNode).toBe(true);
-					NodeIterator.nextNode();
+					nodeIterator.nextNode();
 				}
 				expectedPreviousNode = currentNode;
 			}
diff --git a/packages/happy-dom/test/tree-walker/TreeWalker.test.ts b/packages/happy-dom/test/tree-walker/TreeWalker.test.ts
index 1bd6db005..cdffc7828 100644
--- a/packages/happy-dom/test/tree-walker/TreeWalker.test.ts
+++ b/packages/happy-dom/test/tree-walker/TreeWalker.test.ts
@@ -6,7 +6,6 @@ import Comment from '../../src/nodes/comment/Comment.js';
 import Node from '../../src/nodes/node/Node.js';
 import TreeWalkerHTML from './data/TreeWalkerHTML.js';
 import { beforeEach, describe, it, expect } from 'vitest';
-import Node from '../../src/nodes/node/Node.js';
 
 const NODE_TO_STRING = (node: Node): string => {
 	if (node instanceof Element) {
@@ -62,7 +61,7 @@ describe('TreeWalker', () => {
 				'\n\t\t\t\t',
 				'<!-- Comment 2 !-->',
 				'\n\t\t\t',
-				'\n\t\t'
+				'\n\t\t\n\t'
 			]);
 		});
 
@@ -159,7 +158,7 @@ describe('TreeWalker', () => {
 				'\n\t\t\t\t',
 				'<!-- Comment 2 !-->',
 				'\n\t\t\t',
-				'\n\t\t'
+				'\n\t\t\n\t'
 			]);
 		});
 	});
diff --git a/packages/happy-dom/test/window/BrowserWindow.test.ts b/packages/happy-dom/test/window/BrowserWindow.test.ts
index 100572ce4..d94c3e45c 100644
--- a/packages/happy-dom/test/window/BrowserWindow.test.ts
+++ b/packages/happy-dom/test/window/BrowserWindow.test.ts
@@ -81,6 +81,27 @@ describe('BrowserWindow', () => {
 		});
 	});
 
+	describe('get document()', () => {
+		it('Returns the document.', () => {
+			expect(window.document).toBeInstanceOf(Document);
+
+			expect(window.document.isConnected).toBe(true);
+			expect(window.document.defaultView).toBe(window);
+
+			expect(window.document.documentElement.ownerDocument).toBe(window.document);
+			expect(window.document.documentElement.isConnected).toBe(true);
+			expect(window.document.documentElement.getRootNode()).toBe(window.document);
+
+			expect(window.document.head.ownerDocument).toBe(window.document);
+			expect(window.document.head.isConnected).toBe(true);
+			expect(window.document.head.getRootNode()).toBe(window.document);
+
+			expect(window.document.body.ownerDocument).toBe(window.document);
+			expect(window.document.body.isConnected).toBe(true);
+			expect(window.document.body.getRootNode()).toBe(window.document);
+		});
+	});
+
 	describe('get Object()', () => {
 		it('Is not the same as {}.constructor when inside the VM.', () => {
 			expect(typeof window.Object).toBe('function');
diff --git a/packages/happy-dom/test/xml-http-request/XMLHttpRequest.test.ts b/packages/happy-dom/test/xml-http-request/XMLHttpRequest.test.ts
index 4c64db067..bbf6f3ead 100644
--- a/packages/happy-dom/test/xml-http-request/XMLHttpRequest.test.ts
+++ b/packages/happy-dom/test/xml-http-request/XMLHttpRequest.test.ts
@@ -199,7 +199,7 @@ describe('XMLHttpRequest', () => {
 
 		it('Returns Document when "responseType" is set to "document".', async () => {
 			await new Promise((resolve) => {
-				const responseText = 'Test';
+				const responseText = '<root>Test</root>';
 
 				vi.spyOn(Fetch.prototype, 'send').mockImplementation(
 					async () =>
@@ -218,9 +218,7 @@ describe('XMLHttpRequest', () => {
 				request.open('GET', REQUEST_URL, true);
 
 				request.addEventListener('load', () => {
-					expect((<Document>request.response).documentElement.outerHTML).toBe(
-						'<html><head></head><body>Test</body></html>'
-					);
+					expect((<Document>request.response).documentElement.outerHTML).toBe('<root>Test</root>');
 					resolve(null);
 				});
 
diff --git a/packages/happy-dom/test/xml-parser/XMLParser.test.ts b/packages/happy-dom/test/xml-parser/XMLParser.test.ts
index bb76788c4..e3dbadb55 100644
--- a/packages/happy-dom/test/xml-parser/XMLParser.test.ts
+++ b/packages/happy-dom/test/xml-parser/XMLParser.test.ts
@@ -1,25 +1,15 @@
 import XMLParser from '../../src/xml-parser/XMLParser.js';
 import Window from '../../src/window/Window.js';
 import Document from '../../src/nodes/document/Document.js';
-import Node from '../../src/nodes/node/Node.js';
 import HTMLElement from '../../src/nodes/html-element/HTMLElement.js';
-import XMLParserHTML from './data/XMLParserHTML.js';
 import NamespaceURI from '../../src/config/NamespaceURI.js';
 import DocumentType from '../../src/nodes/document-type/DocumentType.js';
 import XMLSerializer from '../../src/xml-serializer/XMLSerializer.js';
-import HTMLTemplateElement from '../../src/nodes/html-template-element/HTMLTemplateElement.js';
 import NodeTypeEnum from '../../src/nodes/node/NodeTypeEnum.js';
 import { beforeEach, describe, it, expect } from 'vitest';
 import CustomElement from '../CustomElement.js';
-
-const GET_EXPECTED_HTML = (html: string): string =>
-	html
-		.replace('<?processing instruction?>', '<!--?processing instruction?-->')
-		.replace('<?processing-instruction>', '<!--?processing-instruction-->')
-		.replace('<!Exclamation mark comment>', '<!--Exclamation mark comment-->')
-		.replace('<!>', '<!---->')
-		.replace('<!DOCTYPE HTML', '<!DOCTYPE html')
-		.replace('<img />', '<img>');
+import Element from '../../src/nodes/element/Element.js';
+import ProcessingInstruction from '../../src/nodes/processing-instruction/ProcessingInstruction.js';
 
 describe('XMLParser', () => {
 	let window: Window;
@@ -31,112 +21,95 @@ describe('XMLParser', () => {
 	});
 
 	describe('parse()', () => {
-		it('Parses HTML with a single <div>.', () => {
-			const root = XMLParser.parse(document, '<div></div>');
-			expect(root.childNodes.length).toBe(1);
-			expect(root.childNodes[0].childNodes.length).toBe(0);
-			expect((<HTMLElement>root.childNodes[0]).tagName).toBe('DIV');
-		});
-
-		it('Parses HTML with a single <div> with attributes.', () => {
-			const root = XMLParser.parse(
-				document,
-				'<div class="class1 class2" id="id" data-no-value></div>'
-			);
-			expect(root.childNodes.length).toBe(1);
-			expect(root.childNodes[0].childNodes.length).toBe(0);
-			expect((<HTMLElement>root.childNodes[0]).tagName).toBe('DIV');
-			expect((<HTMLElement>root.childNodes[0]).id).toBe('id');
-			expect((<HTMLElement>root.childNodes[0]).className).toBe('class1 class2');
-
-			expect((<HTMLElement>root.childNodes[0]).attributes.length).toBe(3);
-
-			expect((<HTMLElement>root.childNodes[0]).attributes[0].name).toBe('class');
-			expect((<HTMLElement>root.childNodes[0]).attributes[0].value).toBe('class1 class2');
-			expect((<HTMLElement>root.childNodes[0]).attributes[0].namespaceURI).toBe(null);
-			expect((<HTMLElement>root.childNodes[0]).attributes[0].specified).toBe(true);
+		it('Parses XML with a single <div>.', () => {
+			const result = new XMLParser(window).parse('<div></div>');
+			expect(result.childNodes.length).toBe(1);
+			expect(result.childNodes[0].childNodes.length).toBe(0);
+			expect((<HTMLElement>result.childNodes[0]).tagName).toBe('div');
+		});
+
+		it('Parses XML with a single <div> with attributes.', () => {
+			const result = new XMLParser(window).parse(
+				'<div class="class1 class2" id="id" data-no-value=""></div>'
+			);
+			expect(result.childNodes.length).toBe(1);
+			expect(result.childNodes[0].childNodes.length).toBe(0);
+			expect((<HTMLElement>result.childNodes[0]).tagName).toBe('div');
+			expect((<HTMLElement>result.childNodes[0]).id).toBe('id');
+			expect((<HTMLElement>result.childNodes[0]).className).toBe('class1 class2');
+
+			expect((<HTMLElement>result.childNodes[0]).attributes.length).toBe(3);
+
+			expect((<HTMLElement>result.childNodes[0]).attributes[0].name).toBe('class');
+			expect((<HTMLElement>result.childNodes[0]).attributes[0].value).toBe('class1 class2');
+			expect((<HTMLElement>result.childNodes[0]).attributes[0].namespaceURI).toBe(null);
+			expect((<HTMLElement>result.childNodes[0]).attributes[0].specified).toBe(true);
 			expect(
-				(<HTMLElement>root.childNodes[0]).attributes[0].ownerElement === root.childNodes[0]
+				(<HTMLElement>result.childNodes[0]).attributes[0].ownerElement === result.childNodes[0]
 			).toBe(true);
-			expect((<HTMLElement>root.childNodes[0]).attributes[0].ownerDocument === document).toBe(true);
+			expect((<HTMLElement>result.childNodes[0]).attributes[0].ownerDocument === result).toBe(true);
 
-			expect((<HTMLElement>root.childNodes[0]).attributes[1].name).toBe('id');
-			expect((<HTMLElement>root.childNodes[0]).attributes[1].value).toBe('id');
-			expect((<HTMLElement>root.childNodes[0]).attributes[1].namespaceURI).toBe(null);
-			expect((<HTMLElement>root.childNodes[0]).attributes[1].specified).toBe(true);
+			expect((<HTMLElement>result.childNodes[0]).attributes[1].name).toBe('id');
+			expect((<HTMLElement>result.childNodes[0]).attributes[1].value).toBe('id');
+			expect((<HTMLElement>result.childNodes[0]).attributes[1].namespaceURI).toBe(null);
+			expect((<HTMLElement>result.childNodes[0]).attributes[1].specified).toBe(true);
 			expect(
-				(<HTMLElement>root.childNodes[0]).attributes[1].ownerElement === root.childNodes[0]
+				(<HTMLElement>result.childNodes[0]).attributes[1].ownerElement === result.childNodes[0]
 			).toBe(true);
-			expect((<HTMLElement>root.childNodes[0]).attributes[1].ownerDocument === document).toBe(true);
+			expect((<HTMLElement>result.childNodes[0]).attributes[1].ownerDocument === result).toBe(true);
 
-			expect((<HTMLElement>root.childNodes[0]).attributes[2].name).toBe('data-no-value');
-			expect((<HTMLElement>root.childNodes[0]).attributes[2].value).toBe('');
-			expect((<HTMLElement>root.childNodes[0]).attributes[2].namespaceURI).toBe(null);
-			expect((<HTMLElement>root.childNodes[0]).attributes[2].specified).toBe(true);
+			expect((<HTMLElement>result.childNodes[0]).attributes[2].name).toBe('data-no-value');
+			expect((<HTMLElement>result.childNodes[0]).attributes[2].value).toBe('');
+			expect((<HTMLElement>result.childNodes[0]).attributes[2].namespaceURI).toBe(null);
+			expect((<HTMLElement>result.childNodes[0]).attributes[2].specified).toBe(true);
 			expect(
-				(<HTMLElement>root.childNodes[0]).attributes[2].ownerElement === root.childNodes[0]
+				(<HTMLElement>result.childNodes[0]).attributes[2].ownerElement === result.childNodes[0]
 			).toBe(true);
-			expect((<HTMLElement>root.childNodes[0]).attributes[2].ownerDocument === document).toBe(true);
+			expect((<HTMLElement>result.childNodes[0]).attributes[2].ownerDocument === result).toBe(true);
 
-			expect((<HTMLElement>root.childNodes[0]).attributes['class'].name).toBe('class');
-			expect((<HTMLElement>root.childNodes[0]).attributes['class'].value).toBe('class1 class2');
-			expect((<HTMLElement>root.childNodes[0]).attributes['class'].namespaceURI).toBe(null);
-			expect((<HTMLElement>root.childNodes[0]).attributes['class'].specified).toBe(true);
+			expect((<HTMLElement>result.childNodes[0]).attributes['class'].name).toBe('class');
+			expect((<HTMLElement>result.childNodes[0]).attributes['class'].value).toBe('class1 class2');
+			expect((<HTMLElement>result.childNodes[0]).attributes['class'].namespaceURI).toBe(null);
+			expect((<HTMLElement>result.childNodes[0]).attributes['class'].specified).toBe(true);
 			expect(
-				(<HTMLElement>root.childNodes[0]).attributes['class'].ownerElement === root.childNodes[0]
+				(<HTMLElement>result.childNodes[0]).attributes['class'].ownerElement ===
+					result.childNodes[0]
 			).toBe(true);
-			expect((<HTMLElement>root.childNodes[0]).attributes['class'].ownerDocument === document).toBe(
+			expect((<HTMLElement>result.childNodes[0]).attributes['class'].ownerDocument === result).toBe(
 				true
 			);
 
-			expect((<HTMLElement>root.childNodes[0]).attributes['id'].name).toBe('id');
-			expect((<HTMLElement>root.childNodes[0]).attributes['id'].value).toBe('id');
-			expect((<HTMLElement>root.childNodes[0]).attributes['id'].namespaceURI).toBe(null);
-			expect((<HTMLElement>root.childNodes[0]).attributes['id'].specified).toBe(true);
+			expect((<HTMLElement>result.childNodes[0]).attributes['id'].name).toBe('id');
+			expect((<HTMLElement>result.childNodes[0]).attributes['id'].value).toBe('id');
+			expect((<HTMLElement>result.childNodes[0]).attributes['id'].namespaceURI).toBe(null);
+			expect((<HTMLElement>result.childNodes[0]).attributes['id'].specified).toBe(true);
 			expect(
-				(<HTMLElement>root.childNodes[0]).attributes['id'].ownerElement === root.childNodes[0]
+				(<HTMLElement>result.childNodes[0]).attributes['id'].ownerElement === result.childNodes[0]
 			).toBe(true);
-			expect((<HTMLElement>root.childNodes[0]).attributes['id'].ownerDocument === document).toBe(
+			expect((<HTMLElement>result.childNodes[0]).attributes['id'].ownerDocument === result).toBe(
 				true
 			);
 
-			expect((<HTMLElement>root.childNodes[0]).attributes['data-no-value'].name).toBe(
+			expect((<HTMLElement>result.childNodes[0]).attributes['data-no-value'].name).toBe(
 				'data-no-value'
 			);
-			expect((<HTMLElement>root.childNodes[0]).attributes['data-no-value'].value).toBe('');
-			expect((<HTMLElement>root.childNodes[0]).attributes['data-no-value'].namespaceURI).toBe(null);
-			expect((<HTMLElement>root.childNodes[0]).attributes['data-no-value'].specified).toBe(true);
+			expect((<HTMLElement>result.childNodes[0]).attributes['data-no-value'].value).toBe('');
+			expect((<HTMLElement>result.childNodes[0]).attributes['data-no-value'].namespaceURI).toBe(
+				null
+			);
+			expect((<HTMLElement>result.childNodes[0]).attributes['data-no-value'].specified).toBe(true);
 			expect(
-				(<HTMLElement>root.childNodes[0]).attributes['data-no-value'].ownerElement ===
-					root.childNodes[0]
+				(<HTMLElement>result.childNodes[0]).attributes['data-no-value'].ownerElement ===
+					result.childNodes[0]
 			).toBe(true);
 			expect(
-				(<HTMLElement>root.childNodes[0]).attributes['data-no-value'].ownerDocument === document
+				(<HTMLElement>result.childNodes[0]).attributes['data-no-value'].ownerDocument === result
 			).toBe(true);
 		});
 
-		it('Parses an entire HTML page.', () => {
-			const root = XMLParser.parse(document, XMLParserHTML);
-			expect(new XMLSerializer().serializeToString(root)).toBe(GET_EXPECTED_HTML(XMLParserHTML));
-		});
-
-		it('Parses a page with document type set to "HTML 4.01".', () => {
-			const pageHTML = XMLParserHTML.trim().replace(
-				'<!DOCTYPE html>',
-				'<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">'
-			);
-			const root = XMLParser.parse(document, pageHTML);
-			const doctype = <DocumentType>root.childNodes[0];
-			expect(doctype.name).toBe('html');
-			expect(doctype.publicId).toBe('-//W3C//DTD HTML 4.01//EN');
-			expect(doctype.systemId).toBe('http://www.w3.org/TR/html4/strict.dtd');
-			expect(new XMLSerializer().serializeToString(root)).toBe(GET_EXPECTED_HTML(pageHTML));
-		});
-
-		it('Handles unnestable elements correctly when there are siblings.', () => {
-			const root = XMLParser.parse(
-				document,
-				`<article>
+		it("Doesn't use the config for unnestable elements when there are siblings.", () => {
+			const result = new XMLParser(window).parse(
+				`<article xmlsns="http://www.w3.org/1999/xhtml">
                     <span>
                         <div>
                             <a><a>Test</a></a>
@@ -145,143 +118,93 @@ describe('XMLParser', () => {
                     <b>Test</b>
                 </article>`
 			);
-			expect(new XMLSerializer().serializeToString(root).replace(/\s/gm, '')).toBe(
-				`
-                <article>
-                    <span>
-                        <div>
-                            <a></a><a>Test</a>
-                        </div>
-                    </span>
-                    <b>Test</b>
-                </article>
-            `.replace(/\s/gm, '')
-			);
-		});
-
-		it('Handles unnestable elements correctly when the nested element is wrapped by another element.', () => {
-			const root = XMLParser.parse(
-				document,
-				`<article>
+			expect(new XMLSerializer().serializeToString(result)).toBe(
+				`<article xmlsns="http://www.w3.org/1999/xhtml">
                     <span>
                         <div>
-                            <a><span><a>Test</a></span></a>
+                            <a><a>Test</a></a>
                         </div>
                     </span>
                     <b>Test</b>
                 </article>`
 			);
-			expect(new XMLSerializer().serializeToString(root).replace(/\s/gm, '')).toBe(
-				`
-                <article>
-                    <span>
-                        <div>
-                            <a><span></span></a><a>Test</a>
-                        </div>
-                    </span>
-                    <b>Test</b>
-                </article>
-            `.replace(/\s/gm, '')
-			);
 		});
 
-		it('Parses a page with document type set to "MathML 1.01".', () => {
-			const pageHTML = XMLParserHTML.trim().replace(
-				'<!DOCTYPE html>',
-				'<!DOCTYPE math SYSTEM "http://www.w3.org/Math/DTD/mathml1/mathml.dtd">'
-			);
-			const root = XMLParser.parse(document, pageHTML);
-			const doctype = <DocumentType>root.childNodes[0];
+		it('Can parse document types.', () => {
+			const html = `<!DOCTYPE math SYSTEM "http://www.w3.org/Math/DTD/mathml1/mathml.dtd">
+            <html>
+                <head>
+                    <title>Title</title>
+                </head>
+                <body>
+                    <div class="class1 class2" id="id"></div>
+                </body>
+            </html>`;
+			const expected = `<!DOCTYPE math SYSTEM "http://www.w3.org/Math/DTD/mathml1/mathml.dtd"><html>
+                <head>
+                    <title>Title</title>
+                </head>
+                <body>
+                    <div class="class1 class2" id="id"/>
+                </body>
+            </html>`;
+
+			const result = new XMLParser(window).parse(html);
+			const doctype = <DocumentType>result.childNodes[0];
 			expect(doctype.name).toBe('math');
 			expect(doctype.publicId).toBe('');
 			expect(doctype.systemId).toBe('http://www.w3.org/Math/DTD/mathml1/mathml.dtd');
-			expect(new XMLSerializer().serializeToString(root)).toBe(GET_EXPECTED_HTML(pageHTML));
+			expect(new XMLSerializer().serializeToString(result)).toBe(expected);
 		});
 
-		it('Handles unclosed tags of unnestable elements (e.g. <a>, <li>).', () => {
-			const root = XMLParser.parse(
-				document,
-				`
-				<div class="test" disabled>
-					<ul>
-						<li><a href="http://localhost:8080/test/test" target="_blank">Test</a>
-						<li><span>Test 2</span></li>
-						<li><b>Test 3</b></li>
-					</ul>
-					<a><a>Test</a></a>
-				</div>
-				`
-			);
+		it('Outputs error for malformed processing instructions.', () => {
+			const result = new XMLParser(window).parse(`<?processing-instruction><article></article>`);
 
-			expect(new XMLSerializer().serializeToString(root).replace(/\s/gm, '')).toBe(
-				`
-				<div class="test" disabled="">
-					<ul>
-						<li><a href="http://localhost:8080/test/test" target="_blank">Test</a></li>
-						<li><span>Test 2</span></li>
-						<li><b>Test 3</b></li>
-					</ul>
-					<a></a><a>Test</a>
-				</div>
-				`.replace(/\s/gm, '')
+			expect(new XMLSerializer().serializeToString(result)).toBe(
+				`<html xmlns="http://www.w3.org/1999/xhtml"><body><parsererror style="display: block; white-space: pre; border: 2px solid #c77; padding: 0 1em 0 1em; margin: 1em; background-color: #fdd; color: black"><h3>This page contains the following errors:</h3><div style="font-family:monospace;font-size:12px">error on line 1 at column 25: ParsePI: PI processing-instruction space expected
+</div><h3>Below is a rendering of the page up to the first error.</h3></parsererror></body></html>`
 			);
 		});
 
-		it('Does not parse the content of script and style elements.', () => {
-			const root = XMLParser.parse(
-				document,
-				`<div>
-					<script>if(1<Math['random']()){}else if(Math['random']()>1){console.log("1")}</script>
-					<script><b></b></script>
-					<style><b></b></style>
-				</div>`
-			);
+		it('Outputs error for missing end of start tag character.', () => {
+			const result = new XMLParser(window).parse(`<article>
+                <div
+            </article>`);
 
-			expect((<HTMLElement>root.children[0].children[0]).innerText).toBe(
-				`if(1<Math['random']()){}else if(Math['random']()>1){console.log("1")}`
+			expect(new XMLSerializer().serializeToString(result)).toBe(
+				`<article><parsererror xmlns="http://www.w3.org/1999/xhtml" style="display: block; white-space: pre; border: 2px solid #c77; padding: 0 1em 0 1em; margin: 1em; background-color: #fdd; color: black"><h3>This page contains the following errors:</h3><div style="font-family:monospace;font-size:12px">error on line 3 at column 13: error parsing attribute name
+</div><h3>Below is a rendering of the page up to the first error.</h3></parsererror></article>`
 			);
+		});
 
-			expect((<HTMLElement>root.children[0].children[1]).innerText).toBe('<b></b>');
-			expect((<HTMLElement>root.children[0].children[2]).innerText).toBe('<b></b>');
-
-			expect(new XMLSerializer().serializeToString(root)).toBe(
+		it('Parses content of script tag as normal tags.', () => {
+			const result = new XMLParser(window).parse(
 				`<div>
-					<script>if(1<Math['random']()){}else if(Math['random']()>1){console.log("1")}</script>
 					<script><b></b></script>
 					<style><b></b></style>
 				</div>`
 			);
 
-			const root2 = XMLParser.parse(
-				document,
-				`<html>
-                    <head>
-                        <title>Title</title>
-                    </head>
-                    <body>
-                        <script type="text/javascript">var vars = []; for (var i=0;i<vars.length;i++) {}</script>
-                    </body>
-                </html>`
-			);
-			expect((<HTMLElement>root2.children[0].children[1].children[0]).innerText).toBe(
-				'var vars = []; for (var i=0;i<vars.length;i++) {}'
-			);
+			expect((<HTMLElement>result.children[0].children[0]).textContent).toBe('');
+			expect((<HTMLElement>result.children[0].children[1]).textContent).toBe('');
+			expect((<HTMLElement>result.children[0].children[0]).innerHTML).toBe('<b></b>');
+			expect((<HTMLElement>result.children[0].children[1]).innerHTML).toBe('<b></b>');
 		});
 
-		it('Handles unclosed regular elements.', () => {
-			const root = XMLParser.parse(document, `<div>test`);
+		it('Outputs error for incomplete end tag.', () => {
+			const result = new XMLParser(window).parse(`<article>test`);
 
-			expect(root.childNodes.length).toBe(1);
-			expect((<HTMLElement>root.childNodes[0]).tagName).toBe('DIV');
-			expect(root.childNodes[0].childNodes[0].nodeType).toBe(Node.TEXT_NODE);
+			expect(new XMLSerializer().serializeToString(result)).toBe(
+				`<article><parsererror xmlns="http://www.w3.org/1999/xhtml" style="display: block; white-space: pre; border: 2px solid #c77; padding: 0 1em 0 1em; margin: 1em; background-color: #fdd; color: black"><h3>This page contains the following errors:</h3><div style="font-family:monospace;font-size:12px">error on line 1 at column 14: Premature end of data in tag article line 1
+</div><h3>Below is a rendering of the page up to the first error.</h3></parsererror>test</article>`
+			);
 		});
 
-		it('Parses an SVG with "xmlns" set to HTML.', () => {
-			const root = XMLParser.parse(
-				document,
+		it('Parses an SVG with "xmlns" set to SVG.', () => {
+			const result = new XMLParser(window).parse(
 				`
 				<div>
-					<svg viewBox="0 0 300 100" stroke="red" fill="grey" xmlns="${NamespaceURI.html}">
+					<svg viewBox="0 0 300 100" stroke="red" fill="grey" xmlns="${NamespaceURI.svg}">
 						<circle cx="50" cy="50" r="40" />
 						<circle cx="150" cy="50" r="4" />
 					
@@ -295,11 +218,26 @@ describe('XMLParser', () => {
 			`
 			);
 
-			const div = root.children[0];
+			expect(new XMLSerializer().serializeToString(result)).toBe(
+				`<div>
+					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 100" stroke="red" fill="grey">
+						<circle cx="50" cy="50" r="40"/>
+						<circle cx="150" cy="50" r="4"/>
+					
+						<svg viewBox="0 0 10 10" x="200" width="100">
+							<clippath>
+								<circle cx="5" cy="5" r="4"/>
+							</clippath>
+						</svg>
+					</svg>
+				</div>`
+			);
+
+			const div = result.children[0];
 			const svg = div.children[0];
 			const circle = svg.children[0];
 
-			expect(div.namespaceURI).toBe(NamespaceURI.html);
+			expect(div.namespaceURI).toBe(null);
 			expect(svg.namespaceURI).toBe(NamespaceURI.svg);
 			expect(circle.namespaceURI).toBe(NamespaceURI.svg);
 
@@ -311,81 +249,164 @@ describe('XMLParser', () => {
 			expect(svg.attributes[0].namespaceURI).toBe(null);
 			expect(svg.attributes[0].specified).toBe(true);
 			expect(svg.attributes[0].ownerElement === svg).toBe(true);
-			expect(svg.attributes[0].ownerDocument === document).toBe(true);
+			expect(svg.attributes[0].ownerDocument === result).toBe(true);
 
 			expect(svg.attributes[1].name).toBe('stroke');
 			expect(svg.attributes[1].value).toBe('red');
 			expect(svg.attributes[1].namespaceURI).toBe(null);
 			expect(svg.attributes[1].specified).toBe(true);
 			expect(svg.attributes[1].ownerElement === svg).toBe(true);
-			expect(svg.attributes[1].ownerDocument === document).toBe(true);
+			expect(svg.attributes[1].ownerDocument === result).toBe(true);
 
 			expect(svg.attributes[2].name).toBe('fill');
 			expect(svg.attributes[2].value).toBe('grey');
 			expect(svg.attributes[2].namespaceURI).toBe(null);
 			expect(svg.attributes[2].specified).toBe(true);
 			expect(svg.attributes[2].ownerElement === svg).toBe(true);
-			expect(svg.attributes[2].ownerDocument === document).toBe(true);
+			expect(svg.attributes[2].ownerDocument === result).toBe(true);
 
 			expect(svg.attributes[3].name).toBe('xmlns');
-			expect(svg.attributes[3].value).toBe(NamespaceURI.html);
+			expect(svg.attributes[3].value).toBe(NamespaceURI.svg);
 			expect(svg.attributes[3].namespaceURI).toBe(NamespaceURI.xmlns);
 			expect(svg.attributes[3].specified).toBe(true);
 			expect(svg.attributes[3].ownerElement === svg).toBe(true);
-			expect(svg.attributes[3].ownerDocument === document).toBe(true);
+			expect(svg.attributes[3].ownerDocument === result).toBe(true);
 
 			expect(svg.attributes['viewBox'].name).toBe('viewBox');
 			expect(svg.attributes['viewBox'].value).toBe('0 0 300 100');
 			expect(svg.attributes['viewBox'].namespaceURI).toBe(null);
 			expect(svg.attributes['viewBox'].specified).toBe(true);
 			expect(svg.attributes['viewBox'].ownerElement === svg).toBe(true);
-			expect(svg.attributes['viewBox'].ownerDocument === document).toBe(true);
+			expect(svg.attributes['viewBox'].ownerDocument === result).toBe(true);
 
 			expect(svg.attributes['stroke'].name).toBe('stroke');
 			expect(svg.attributes['stroke'].value).toBe('red');
 			expect(svg.attributes['stroke'].namespaceURI).toBe(null);
 			expect(svg.attributes['stroke'].specified).toBe(true);
 			expect(svg.attributes['stroke'].ownerElement === svg).toBe(true);
-			expect(svg.attributes['stroke'].ownerDocument === document).toBe(true);
+			expect(svg.attributes['stroke'].ownerDocument === result).toBe(true);
 
 			expect(svg.attributes['fill'].name).toBe('fill');
 			expect(svg.attributes['fill'].value).toBe('grey');
 			expect(svg.attributes['fill'].namespaceURI).toBe(null);
 			expect(svg.attributes['fill'].specified).toBe(true);
 			expect(svg.attributes['fill'].ownerElement === svg).toBe(true);
-			expect(svg.attributes['fill'].ownerDocument === document).toBe(true);
+			expect(svg.attributes['fill'].ownerDocument === result).toBe(true);
 
 			expect(svg.attributes['xmlns'].name).toBe('xmlns');
-			expect(svg.attributes['xmlns'].value).toBe(NamespaceURI.html);
+			expect(svg.attributes['xmlns'].value).toBe(NamespaceURI.svg);
 			expect(svg.attributes['xmlns'].namespaceURI).toBe(NamespaceURI.xmlns);
 			expect(svg.attributes['xmlns'].specified).toBe(true);
 			expect(svg.attributes['xmlns'].ownerElement === svg).toBe(true);
-			expect(svg.attributes['xmlns'].ownerDocument === document).toBe(true);
+			expect(svg.attributes['xmlns'].ownerDocument === result).toBe(true);
+		});
 
-			expect(new XMLSerializer().serializeToString(root)).toBe(
+		it('Parses an SVG with "xmlns" set to HTML.', () => {
+			const result = new XMLParser(window).parse(
 				`
 				<div>
 					<svg viewBox="0 0 300 100" stroke="red" fill="grey" xmlns="${NamespaceURI.html}">
+						<circle cx="50" cy="50" r="40" />
+						<circle cx="150" cy="50" r="4" />
+					
+						<svg viewBox="0 0 10 10" x="200" width="100">
+							<clippath>
+								<circle cx="5" cy="5" r="4" />
+							</clippath>
+						</svg>
+					</svg>
+				</div>
+			`
+			);
+
+			expect(new XMLSerializer().serializeToString(result)).toBe(
+				`<div>
+					<svg xmlns="http://www.w3.org/1999/xhtml" viewBox="0 0 300 100" stroke="red" fill="grey">
 						<circle cx="50" cy="50" r="40"></circle>
 						<circle cx="150" cy="50" r="4"></circle>
 					
 						<svg viewBox="0 0 10 10" x="200" width="100">
-							<clipPath>
+							<clippath>
 								<circle cx="5" cy="5" r="4"></circle>
-							</clipPath>
+							</clippath>
 						</svg>
 					</svg>
-				</div>
-			`
+				</div>`
 			);
+
+			const div = result.children[0];
+			const svg = div.children[0];
+			const circle = svg.children[0];
+
+			expect(div.namespaceURI).toBe(null);
+			expect(svg.namespaceURI).toBe(NamespaceURI.html);
+			expect(circle.namespaceURI).toBe(NamespaceURI.html);
+
+			// Attributes should be in lower-case now as the namespace is HTML
+			expect(svg.attributes.length).toBe(4);
+
+			expect(svg.attributes[0].name).toBe('viewBox');
+			expect(svg.attributes[0].value).toBe('0 0 300 100');
+			expect(svg.attributes[0].namespaceURI).toBe(null);
+			expect(svg.attributes[0].specified).toBe(true);
+			expect(svg.attributes[0].ownerElement === svg).toBe(true);
+			expect(svg.attributes[0].ownerDocument === result).toBe(true);
+
+			expect(svg.attributes[1].name).toBe('stroke');
+			expect(svg.attributes[1].value).toBe('red');
+			expect(svg.attributes[1].namespaceURI).toBe(null);
+			expect(svg.attributes[1].specified).toBe(true);
+			expect(svg.attributes[1].ownerElement === svg).toBe(true);
+			expect(svg.attributes[1].ownerDocument === result).toBe(true);
+
+			expect(svg.attributes[2].name).toBe('fill');
+			expect(svg.attributes[2].value).toBe('grey');
+			expect(svg.attributes[2].namespaceURI).toBe(null);
+			expect(svg.attributes[2].specified).toBe(true);
+			expect(svg.attributes[2].ownerElement === svg).toBe(true);
+			expect(svg.attributes[2].ownerDocument === result).toBe(true);
+
+			expect(svg.attributes[3].name).toBe('xmlns');
+			expect(svg.attributes[3].value).toBe(NamespaceURI.html);
+			expect(svg.attributes[3].namespaceURI).toBe(NamespaceURI.xmlns);
+			expect(svg.attributes[3].specified).toBe(true);
+			expect(svg.attributes[3].ownerElement === svg).toBe(true);
+			expect(svg.attributes[3].ownerDocument === result).toBe(true);
+
+			expect(svg.attributes['viewBox'].name).toBe('viewBox');
+			expect(svg.attributes['viewBox'].value).toBe('0 0 300 100');
+			expect(svg.attributes['viewBox'].namespaceURI).toBe(null);
+			expect(svg.attributes['viewBox'].specified).toBe(true);
+			expect(svg.attributes['viewBox'].ownerElement === svg).toBe(true);
+			expect(svg.attributes['viewBox'].ownerDocument === result).toBe(true);
+
+			expect(svg.attributes['stroke'].name).toBe('stroke');
+			expect(svg.attributes['stroke'].value).toBe('red');
+			expect(svg.attributes['stroke'].namespaceURI).toBe(null);
+			expect(svg.attributes['stroke'].specified).toBe(true);
+			expect(svg.attributes['stroke'].ownerElement === svg).toBe(true);
+			expect(svg.attributes['stroke'].ownerDocument === result).toBe(true);
+
+			expect(svg.attributes['fill'].name).toBe('fill');
+			expect(svg.attributes['fill'].value).toBe('grey');
+			expect(svg.attributes['fill'].namespaceURI).toBe(null);
+			expect(svg.attributes['fill'].specified).toBe(true);
+			expect(svg.attributes['fill'].ownerElement === svg).toBe(true);
+			expect(svg.attributes['fill'].ownerDocument === result).toBe(true);
+
+			expect(svg.attributes['xmlns'].name).toBe('xmlns');
+			expect(svg.attributes['xmlns'].value).toBe(NamespaceURI.html);
+			expect(svg.attributes['xmlns'].namespaceURI).toBe(NamespaceURI.xmlns);
+			expect(svg.attributes['xmlns'].specified).toBe(true);
+			expect(svg.attributes['xmlns'].ownerElement === svg).toBe(true);
+			expect(svg.attributes['xmlns'].ownerDocument === result).toBe(true);
 		});
 
-		it('Parses a malformed SVG with "xmlns" set to HTML.', () => {
-			const root = XMLParser.parse(
-				document,
+		it('Outputs error for a malformed SVG.', () => {
+			const result = new XMLParser(window).parse(
 				`
 				<div>
-					<svg viewBox="0 0 300 100" stroke="red" fill="grey" xmlns="${NamespaceURI.html}">
+					<svg viewBox="0 0 300 100" stroke="red" fill="grey" xmlns="${NamespaceURI.svg}">
 						<ellipse cx="50" cy="50" r="40">
 						<line cx="50" cy="50" r="40">
 						<path cx="50" cy="50" r="40">
@@ -405,53 +426,63 @@ describe('XMLParser', () => {
 			`
 			);
 
-			expect(new XMLSerializer().serializeToString(root).replace(/\s/gm, '')).toBe(
-				`
-				<div>
-					<svg viewBox="0 0 300 100" stroke="red" fill="grey" xmlns="http://www.w3.org/1999/xhtml">
+			expect(new XMLSerializer().serializeToString(result)).toBe(
+				`<div><parsererror xmlns="http://www.w3.org/1999/xhtml" style="display: block; white-space: pre; border: 2px solid #c77; padding: 0 1em 0 1em; margin: 1em; background-color: #fdd; color: black"><h3>This page contains the following errors:</h3><div style="font-family:monospace;font-size:12px">error on line 13 at column 74: Opening and ending tag mismatch: circle line 13 and clippath
+</div><h3>Below is a rendering of the page up to the first error.</h3></parsererror>
+					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 100" stroke="red" fill="grey">
 						<ellipse cx="50" cy="50" r="40">
 						<line cx="50" cy="50" r="40">
 						<path cx="50" cy="50" r="40">
 						<polygon cx="50" cy="50" r="40">
-						<polyline cx="50" cy="50" r="40"></polyline>
-						<rect cx="50" cy="50" r="40"></rect>
-						<stop cx="50" cy="50" r="40"></stop>
-						<use cx="50" cy="50" r="40"></use>
-						<circle cx="150" cy="50" r="4"><test></test></circle>
-                        <clipPath><circle cx="5" cy="5" r="4"></circle></clipPath>
-					
-						<svg viewBox="0 0 10 10" x="200" width="100">
-							<circle cx="5" cy="5" r="4"></circle>
-						</svg>
-					</polygon>
-				</path>
-			</line></ellipse></svg></div>`.replace(/\s/gm, '')
+						<polyline cx="50" cy="50" r="40"/>
+						<rect cx="50" cy="50" r="40"/>
+						<stop cx="50" cy="50" r="40"/>
+						<use cx="50" cy="50" r="40"/>
+						<circle cx="150" cy="50" r="4"><test/></circle>
+                        <clippath><circle cx="5" cy="5" r="4"/></clippath></polygon></path></line></ellipse></svg></div>`
 			);
 		});
 
-		it('Parses childless elements with start and end tag names in different case', () => {
-			const root = XMLParser.parse(
-				document,
+		it('Outputs error for start tag and end tag in different casing', () => {
+			const result = new XMLParser(window).parse(
 				`
 				<script type="text/JavaScript">console.log('hello')</SCRIPT>
 				`
 			);
 
-			expect((<HTMLElement>root.children[0]).innerText).toBe(`console.log('hello')`);
+			expect(new XMLSerializer().serializeToString(result))
+				.toBe(`<script type="text/JavaScript"><parsererror xmlns="http://www.w3.org/1999/xhtml" style="display: block; white-space: pre; border: 2px solid #c77; padding: 0 1em 0 1em; margin: 1em; background-color: #fdd; color: black"><h3>This page contains the following errors:</h3><div style="font-family:monospace;font-size:12px">error on line 2 at column 65: Opening and ending tag mismatch: script line 2 and SCRIPT
+</div><h3>Below is a rendering of the page up to the first error.</h3></parsererror></script>`);
+		});
+
+		it('Outputs error for missing document element', () => {
+			const result = new XMLParser(window).parse(`Test`);
+
+			expect(new XMLSerializer().serializeToString(result)).toBe(
+				`<html xmlns="http://www.w3.org/1999/xhtml"><body><parsererror style="display: block; white-space: pre; border: 2px solid #c77; padding: 0 1em 0 1em; margin: 1em; background-color: #fdd; color: black"><h3>This page contains the following errors:</h3><div style="font-family:monospace;font-size:12px">error on line 1 at column 1: Start tag expected, '&lt;' not found</div><h3>Below is a rendering of the page up to the first error.</h3></parsererror></body></html>`
+			);
 		});
 
 		it('Handles different value types.', () => {
-			const root1 = XMLParser.parse(document, <string>(<unknown>null));
-			expect(new XMLSerializer().serializeToString(root1)).toBe('');
+			const result1 = new XMLParser(window).parse(<string>(<unknown>null));
+			expect(new XMLSerializer().serializeToString(result1)).toBe(
+				`<html xmlns="http://www.w3.org/1999/xhtml"><body><parsererror style="display: block; white-space: pre; border: 2px solid #c77; padding: 0 1em 0 1em; margin: 1em; background-color: #fdd; color: black"><h3>This page contains the following errors:</h3><div style="font-family:monospace;font-size:12px">error on line 1 at column 1: Start tag expected, '&lt;' not found</div><h3>Below is a rendering of the page up to the first error.</h3></parsererror></body></html>`
+			);
 
-			const root2 = XMLParser.parse(document, <string>(<unknown>undefined));
-			expect(new XMLSerializer().serializeToString(root2)).toBe('');
+			const result2 = new XMLParser(window).parse(<string>(<unknown>undefined));
+			expect(new XMLSerializer().serializeToString(result2)).toBe(
+				`<html xmlns="http://www.w3.org/1999/xhtml"><body><parsererror style="display: block; white-space: pre; border: 2px solid #c77; padding: 0 1em 0 1em; margin: 1em; background-color: #fdd; color: black"><h3>This page contains the following errors:</h3><div style="font-family:monospace;font-size:12px">error on line 1 at column 1: Start tag expected, '&lt;' not found</div><h3>Below is a rendering of the page up to the first error.</h3></parsererror></body></html>`
+			);
 
-			const root3 = XMLParser.parse(document, <string>(<unknown>1000));
-			expect(new XMLSerializer().serializeToString(root3)).toBe('1000');
+			const result3 = new XMLParser(window).parse(<string>(<unknown>1000));
+			expect(new XMLSerializer().serializeToString(result3)).toBe(
+				`<html xmlns="http://www.w3.org/1999/xhtml"><body><parsererror style="display: block; white-space: pre; border: 2px solid #c77; padding: 0 1em 0 1em; margin: 1em; background-color: #fdd; color: black"><h3>This page contains the following errors:</h3><div style="font-family:monospace;font-size:12px">error on line 1 at column 1: Start tag expected, '&lt;' not found</div><h3>Below is a rendering of the page up to the first error.</h3></parsererror></body></html>`
+			);
 
-			const root4 = XMLParser.parse(document, <string>(<unknown>false));
-			expect(new XMLSerializer().serializeToString(root4)).toBe('false');
+			const result4 = new XMLParser(window).parse(<string>(<unknown>false));
+			expect(new XMLSerializer().serializeToString(result4)).toBe(
+				`<html xmlns="http://www.w3.org/1999/xhtml"><body><parsererror style="display: block; white-space: pre; border: 2px solid #c77; padding: 0 1em 0 1em; margin: 1em; background-color: #fdd; color: black"><h3>This page contains the following errors:</h3><div style="font-family:monospace;font-size:12px">error on line 1 at column 1: Start tag expected, '&lt;' not found</div><h3>Below is a rendering of the page up to the first error.</h3></parsererror></body></html>`
+			);
 		});
 
 		it('Parses conditional comments', () => {
@@ -483,269 +514,160 @@ describe('XMLParser', () => {
 				// Conditional comment - Contoso 2
 				'<!--[if lt Contoso 2]>\n' +
 					'<p>Your version of the Contoso control is out of date; Please update to the latest.</p>\n' +
-					'<![endif]-->',
-
-				// Conditional comment - IE 9 - With multiple scripts
-				'<!DOCTYPE html><html lang="en">\n' +
-					'<head>\n' +
-					'    <meta charset="UTF-8">\n' +
-					'    <title>Title</title>\n' +
-					'</head>\n' +
-					'<body>\n' +
-					'<!--[if lt IE 9]>\n' +
-					"<script>window.location = 'browser.htm';</script>\n" +
-					'<![endif]-->\n' +
-					'\n' +
-					'\n' +
-					'<script>\n' +
-					"    const node = document.createElement('a');\n" +
-					"    node.href = 'http://www.google.com';\n" +
-					"    node.target = '_blank';\n" +
-					"    node.innerHTML = 'google';\n" +
-					'    window.document.body.appendChild(node);\n' +
-					'</script>\n' +
-					'</body>\n' +
-					'</html>\n'
+					'<![endif]-->'
 			];
 
 			for (const html of testHTML) {
-				const root = XMLParser.parse(document, html);
-				expect(new XMLSerializer().serializeToString(root)).toBe(html);
+				const result = new XMLParser(window).parse(`<article>\n${html}\n</article>`);
+				expect(new XMLSerializer().serializeToString(result)).toBe(
+					`<article>\n${html}\n</article>`
+				);
 			}
 		});
 
 		it('Parses comments with dash in them.', () => {
-			const root = XMLParser.parse(document, '<!-- comment with - in - it -->');
-			expect(root.childNodes.length).toBe(1);
-			expect(root.childNodes[0].nodeType).toBe(NodeTypeEnum.commentNode);
-			expect(root.childNodes[0].nodeValue).toBe(' comment with - in - it ');
-		});
-
-		it('Parses <template> elements, including its content.', () => {
-			const root = XMLParser.parse(document, '<div><template><tr><td></td></tr></template></div>');
-			expect(root.childNodes.length).toBe(1);
-			const template = <HTMLTemplateElement>root.childNodes[0].childNodes[0];
-			expect(template.childNodes.length).toBe(0);
-			expect(template.children.length).toBe(0);
-			expect(template.content.children.length).toBe(1);
-			expect(template.content.children[0].tagName).toBe('TR');
-			expect(template.content.children[0].children.length).toBe(1);
-			expect(template.content.children[0].children[0].tagName).toBe('TD');
+			const result = new XMLParser(window).parse(
+				'<article><!-- comment with - in - it --></article>'
+			);
+			expect(result.childNodes.length).toBe(1);
+			expect(result.childNodes[0].childNodes[0].nodeType).toBe(NodeTypeEnum.commentNode);
+			expect(result.childNodes[0].childNodes[0].nodeValue).toBe(' comment with - in - it ');
 		});
 
-		it('Parses HTML with attributes using colon (:) and value containing ">".', () => {
-			const root = XMLParser.parse(
-				document,
-				'<template><component :is="type" :disabled="index > 1" data-testid="button"/></template>'
+		it('Parses XML with attributes with value containing ">".', () => {
+			const result = new XMLParser(window).parse(
+				'<root><component disabled="index > 1" data-testid="button"/></root>'
 			);
 
-			expect(root.childNodes.length).toBe(1);
-
-			const template = <HTMLTemplateElement>root.childNodes[0];
-			expect(template.content.childNodes.length).toBe(1);
-			expect((<HTMLElement>template.content.childNodes[0]).tagName).toBe('COMPONENT');
-			expect((<HTMLElement>template.content.childNodes[0]).getAttribute(':disabled')).toBe(
-				'index > 1'
+			expect(new XMLSerializer().serializeToString(result)).toBe(
+				'<root><component disabled="index &gt; 1" data-testid="button"/></root>'
 			);
 		});
 
-		it('Doesn\'t close non-void elements when using "/>" when namespace is HTML.', () => {
-			const root = XMLParser.parse(
-				document,
-				`
-                <span key1="value1"/>
-                <span key1="value1" key2/>
-                <span key2/>
-                `
+		it('Parses XML with attributes on new lines.', () => {
+			const result = new XMLParser(window).parse(
+				`<root><component disabled="part1
+part2" data-testid="button"
+                /></root>`
 			);
 
-			expect(new XMLSerializer().serializeToString(root).replace(/\s/gm, '')).toBe(
-				`
-                <span key1="value1">
-                    <span key1="value1" key2="">
-                        <span key2=""></span>
-                    </span>
-                </span>`.replace(/\s/gm, '')
+			expect(new XMLSerializer().serializeToString(result)).toBe(
+				'<root><component disabled="part1 part2" data-testid="button"/></root>'
 			);
 		});
 
-		it('Can read text with ">" in it.', () => {
-			const root = XMLParser.parse(document, `<span>1 > 0</span>`);
+		it('Outputs error for attributes names containing invalid characters (like ":").', () => {
+			const result = new XMLParser(window).parse(
+				'<root><component :is="type" data-testid="button"/></root>'
+			);
 
-			expect(new XMLSerializer().serializeToString(root)).toBe(`<span>1 &gt; 0</span>`);
+			expect(new XMLSerializer().serializeToString(result)).toBe(
+				`<root><parsererror xmlns="http://www.w3.org/1999/xhtml" style="display: block; white-space: pre; border: 2px solid #c77; padding: 0 1em 0 1em; margin: 1em; background-color: #fdd; color: black"><h3>This page contains the following errors:</h3><div style="font-family:monospace;font-size:12px">error on line 1 at column 21: Failed to parse QName ':is'
+</div><h3>Below is a rendering of the page up to the first error.</h3></parsererror></root>`
+			);
 		});
 
-		it('Parses malformed attributes.', () => {
-			const root = XMLParser.parse(
-				document,
-				`
-                <span key1="value1""></span>
-                <span key1="value1"" key2></span>
-                <span key1 key2 key3="value3""></span>
-                <img key1="value1"" key2/>
-                <img key1="value1""
-                />
-                <img key1="value1""
-                key2/>
-                <span key1 key2 key3="value3"''" " "></span>
-                <span key1="value1 > value2"></span>
-                <img key1="value1 /> value2"/>
-                `
+		it('Outputs error for double apostrophes.', () => {
+			const result = new XMLParser(window).parse(
+				'<root><component is="type"" data-testid="button"/></root>'
 			);
 
-			expect(root.children.length).toBe(9);
-
-			expect(root.children[0].attributes.length).toBe(1);
-			expect(root.children[0].attributes[0].name).toBe('key1');
-			expect(root.children[0].attributes[0].value).toBe('value1');
-
-			expect(root.children[1].attributes.length).toBe(2);
-			expect(root.children[1].attributes[0].name).toBe('key1');
-			expect(root.children[1].attributes[0].value).toBe('value1');
-			expect(root.children[1].attributes[1].name).toBe('key2');
-			expect(root.children[1].attributes[1].value).toBe('');
-
-			expect(root.children[2].attributes.length).toBe(3);
-			expect(root.children[2].attributes[0].name).toBe('key1');
-			expect(root.children[2].attributes[0].value).toBe('');
-			expect(root.children[2].attributes[1].name).toBe('key2');
-			expect(root.children[2].attributes[1].value).toBe('');
-			expect(root.children[2].attributes[2].name).toBe('key3');
-			expect(root.children[2].attributes[2].value).toBe('value3');
-
-			expect(root.children[3].attributes.length).toBe(2);
-			expect(root.children[3].attributes[0].name).toBe('key1');
-			expect(root.children[3].attributes[0].value).toBe('value1');
-			expect(root.children[3].attributes[1].name).toBe('key2');
-			expect(root.children[3].attributes[1].value).toBe('');
-
-			expect(root.children[4].attributes.length).toBe(1);
-			expect(root.children[4].attributes[0].name).toBe('key1');
-			expect(root.children[4].attributes[0].value).toBe('value1');
-
-			expect(root.children[5].attributes.length).toBe(2);
-			expect(root.children[5].attributes[0].name).toBe('key1');
-			expect(root.children[5].attributes[0].value).toBe('value1');
-			expect(root.children[5].attributes[1].name).toBe('key2');
-			expect(root.children[5].attributes[1].value).toBe('');
-
-			expect(root.children[6].attributes.length).toBe(3);
-			expect(root.children[6].attributes[0].name).toBe('key1');
-			expect(root.children[6].attributes[0].value).toBe('');
-			expect(root.children[6].attributes[1].name).toBe('key2');
-			expect(root.children[6].attributes[1].value).toBe('');
-			expect(root.children[6].attributes[2].name).toBe('key3');
-			expect(root.children[6].attributes[2].value).toBe('value3');
-
-			expect(root.children[7].attributes.length).toBe(1);
-			expect(root.children[7].attributes[0].name).toBe('key1');
-			expect(root.children[7].attributes[0].value).toBe('value1 > value2');
-
-			expect(root.children[8].attributes.length).toBe(1);
-			expect(root.children[8].attributes[0].name).toBe('key1');
-			expect(root.children[8].attributes[0].value).toBe('value1 /> value2');
-		});
-
-		it('Parses attributes with characters that lit-html is using (".", "$", "@").', () => {
-			const root = XMLParser.parse(
-				document,
-				`
-                <img key1="value1" key2/>
-                <img key1="value1"/>
-                <span .key$lit$="{{lit-11111}}"></span>
-                <div @event="{{lit-22222}}"></div>
-                <article ?checked="{{lit-33333}}"></div>
-                <img key1="value1" key2/>
-                `
+			expect(new XMLSerializer().serializeToString(result)).toBe(
+				`<root><parsererror xmlns="http://www.w3.org/1999/xhtml" style="display: block; white-space: pre; border: 2px solid #c77; padding: 0 1em 0 1em; margin: 1em; background-color: #fdd; color: black"><h3>This page contains the following errors:</h3><div style="font-family:monospace;font-size:12px">error on line 1 at column 27: attributes construct error
+</div><h3>Below is a rendering of the page up to the first error.</h3></parsererror></root>`
 			);
-
-			expect(root.querySelector('span')?.getAttribute('.key$lit$')).toBe('{{lit-11111}}');
-			expect(root.querySelector('div')?.getAttribute('@event')).toBe('{{lit-22222}}');
-			expect(root.querySelector('article')?.getAttribute('?checked')).toBe('{{lit-33333}}');
 		});
 
-		it('Parses attributes without apostrophs.', () => {
-			const root = XMLParser.parse(
-				document,
-				`<div .theme$lit$={{lit-12345}} key1="value1">Test</div>`
+		it('Outputs error for missing end apostrophe.', () => {
+			const result = new XMLParser(window).parse(
+				'<root><component is="type data-testid="button"/></root>'
 			);
 
-			expect(new XMLSerializer().serializeToString(root)).toBe(
-				'<div .theme$lit$="{{lit-12345}}" key1="value1">Test</div>'
+			expect(new XMLSerializer().serializeToString(result)).toBe(
+				`<root><parsererror xmlns="http://www.w3.org/1999/xhtml" style="display: block; white-space: pre; border: 2px solid #c77; padding: 0 1em 0 1em; margin: 1em; background-color: #fdd; color: black"><h3>This page contains the following errors:</h3><div style="font-family:monospace;font-size:12px">error on line 1 at column 40: attributes construct error
+</div><h3>Below is a rendering of the page up to the first error.</h3></parsererror></root>`
 			);
 		});
 
-		it('Parses attributes with URL without apostrophs.', () => {
-			const root = XMLParser.parse(document, `<a href=http://www.github.com/path>Click me</a>`);
+		it('Outputs error for missing end apostrophe at the end.', () => {
+			const result = new XMLParser(window).parse(
+				'<root><component is="type" data-testid="button/></root>'
+			);
 
-			expect(new XMLSerializer().serializeToString(root)).toBe(
-				'<a href="http://www.github.com/path">Click me</a>'
+			expect(new XMLSerializer().serializeToString(result)).toBe(
+				`<root><parsererror xmlns="http://www.w3.org/1999/xhtml" style="display: block; white-space: pre; border: 2px solid #c77; padding: 0 1em 0 1em; margin: 1em; background-color: #fdd; color: black"><h3>This page contains the following errors:</h3><div style="font-family:monospace;font-size:12px">error on line 1 at column 49: Unescaped '&lt;' not allowed in attributes values
+</div><h3>Below is a rendering of the page up to the first error.</h3></parsererror></root>`
 			);
 		});
 
 		it('Parses attributes with single apostrophs.', () => {
-			const root = XMLParser.parse(document, `<div key1='value1' key2='value2'>Test</div>`);
+			const result = new XMLParser(window).parse(`<div key1='value1' key2='value2'>Test</div>`);
 
-			expect(new XMLSerializer().serializeToString(root)).toBe(
+			expect(new XMLSerializer().serializeToString(result)).toBe(
 				`<div key1="value1" key2="value2">Test</div>`
 			);
 		});
 
-		it('Parses HTML with end ">" on a new line.', () => {
-			const root = XMLParser.parse(
-				document,
-				`
-                <div key1="value1">
-                    Test
-                </div
-                >
-                `
+		it('Supports self closing elements.', () => {
+			const result = new XMLParser(window).parse(
+				`<root>
+                    <span key1="value1"/>
+                    <span key1="value1" key2=""/>
+                    <span key2=""/>
+                </root>`
 			);
 
-			expect(new XMLSerializer().serializeToString(root).replace(/\s/gm, '')).toBe(
-				'<divkey1="value1">Test</div>'
+			expect(new XMLSerializer().serializeToString(result)).toBe(
+				`<root>
+                    <span key1="value1"/>
+                    <span key1="value1" key2=""/>
+                    <span key2=""/>
+                </root>`
 			);
-			expect(root.children[0].textContent.replace(/\s/gm, '')).toBe('Test');
 		});
 
-		it('Parses <ul> and <li> elements.', () => {
-			const root = XMLParser.parse(
-				document,
-				`<div>
-                    <ul>
-                        <li>
-                            <ul>
-                                <li>aaaaa</li>
-                                <li>bbbbb</li>
-                            </ul>
-                        </li>
-                    </ul>
-                </div>`
+		it('Outputs error when value for attribute is missing.', () => {
+			const result = new XMLParser(window).parse(
+				`<root>
+                    <span key1="value1"/>
+                    <span key1="value1" key2/>
+                    <span key2/>
+                </root>`
 			);
 
-			expect(new XMLSerializer().serializeToString(root).replace(/\s/gm, '')).toBe(
-				`<div>
-                    <ul>
-                        <li>
-                            <ul>
-                                <li>aaaaa</li>
-                                <li>bbbbb</li>
-                            </ul>
-                        </li>
-                    </ul>
-                </div>`.replace(/\s/gm, '')
+			expect(new XMLSerializer().serializeToString(result)).toBe(
+				`<root><parsererror xmlns="http://www.w3.org/1999/xhtml" style="display: block; white-space: pre; border: 2px solid #c77; padding: 0 1em 0 1em; margin: 1em; background-color: #fdd; color: black"><h3>This page contains the following errors:</h3><div style="font-family:monospace;font-size:12px">error on line 3 at column 45: Specification mandates value for attribute key2
+</div><h3>Below is a rendering of the page up to the first error.</h3></parsererror>
+                    <span key1="value1"/></root>`
 			);
+		});
+
+		it('Can read text with ">" in it.', () => {
+			const result = new XMLParser(window).parse(`<span>1 > 0</span>`);
 
-			const root2 = XMLParser.parse(document, `<li><li><span>Test</span></li></li>`);
+			expect(new XMLSerializer().serializeToString(result)).toBe(`<span>1 &gt; 0</span>`);
+		});
 
-			expect(new XMLSerializer().serializeToString(root2).replace(/\s/gm, '')).toBe(
-				`<li></li><li><span>Test</span></li>`.replace(/\s/gm, '')
+		it('Parses HTML with end ">" on a new line.', () => {
+			const result = new XMLParser(window).parse(
+				`
+                <div key1="value1">
+                    Test
+                </div
+                >
+                `
 			);
+
+			expect(new XMLSerializer().serializeToString(result)).toBe(`<div key1="value1">
+                    Test
+                </div>`);
+			expect(result.children[0].textContent).toBe(`
+                    Test
+                `);
 		});
 
-		it('Handles ending with unclosed start tag.', () => {
-			const root = XMLParser.parse(
-				document,
+		it('Outputs error for unclosed tags.', () => {
+			const result = new XMLParser(window).parse(
 				`<div>
                     <ul>
                         <li>
@@ -758,37 +680,21 @@ describe('XMLParser', () => {
                 </div>`
 			);
 
-			// TODO: Should actually be:
-			// <div>
-			//         <ul>
-			//             <li>
-			//                 <ul>
-			//                     <li>aaaaa</li>
-			//                     <li <="" ul="">
-			//             </li>
-			//         </ul>
-			//     </li></ul></div>
-
-			expect(new XMLSerializer().serializeToString(root).replace(/\s/gm, '')).toBe(
-				`<div>
+			expect(new XMLSerializer().serializeToString(result)).toBe(
+				`<div><parsererror xmlns="http://www.w3.org/1999/xhtml" style="display: block; white-space: pre; border: 2px solid #c77; padding: 0 1em 0 1em; margin: 1em; background-color: #fdd; color: black"><h3>This page contains the following errors:</h3><div style="font-family:monospace;font-size:12px">error on line 7 at column 29: error parsing attribute name
+</div><h3>Below is a rendering of the page up to the first error.</h3></parsererror>
                     <ul>
                         <li>
                             <ul>
-                                <li>aaaaa</li>
-                                <li></li>
-                            </ul>
-                        </li>
-                    </ul>
-                </div>`.replace(/\s/gm, '')
+                                <li>aaaaa</li></ul></li></ul></div>`
 			);
 		});
 
 		it('Handles complex style attributes', () => {
-			const root = XMLParser.parse(
-				document,
+			const result = new XMLParser(window).parse(
 				`<div class="container">
                     <div class="sliderContainer">
-                        <input class="slider" type="range" step="1" min="0" max="100">
+                        <input class="slider" type="range" step="1" min="0" max="100" />
                             
                         <div class="value">
                             <kompis-text-0-0-0 data-element-name="kompis-text"><!---->0<!----></kompis-text-0-0-0>
@@ -799,26 +705,25 @@ describe('XMLParser', () => {
 			    </div>`
 			);
 
-			expect(new XMLSerializer().serializeToString(root).replace(/\s/gm, '')).toBe(
+			expect(new XMLSerializer().serializeToString(result)).toBe(
 				`<div class="container">
                     <div class="sliderContainer">
-                        <input class="slider" type="range" step="1" min="0" max="100">
+                        <input class="slider" type="range" step="1" min="0" max="100"/>
                             
                         <div class="value">
                             <kompis-text-0-0-0 data-element-name="kompis-text"><!---->0<!----></kompis-text-0-0-0>
                         </div>
 		
-					    <div class="sliderBackground" style="background: linear-gradient(to right, rgb(17, 17, 17) 0%, rgb(17, 17, 17) 0.75rem, rgb(223, 223, 223) 0.75rem, rgb(223, 223, 223) 100%);"></div>
+					    <div class="sliderBackground" style="background: linear-gradient(to right, rgb(17, 17, 17) 0%, rgb(17, 17, 17) 0.75rem, rgb(223, 223, 223) 0.75rem, rgb(223, 223, 223) 100%);"/>
 				    </div>
-			    </div>`.replace(/\s/gm, '')
+			    </div>`
 			);
 		});
 
 		it('Handles parsing custom elements registered with non-ASCII characters.', () => {
 			window.customElements.define('a-Öa', CustomElement);
 
-			const root = XMLParser.parse(
-				document,
+			const result = new XMLParser(window).parse(
 				`
                 <div>
                     <a-Öa key1="value1" key2="value2">
@@ -828,15 +733,410 @@ describe('XMLParser', () => {
                 `
 			);
 
-			expect(new XMLSerializer().serializeToString(root).replace(/\s/gm, '')).toBe(
-				`
-                <div>
+			expect(new XMLSerializer().serializeToString(result)).toBe(
+				`<div>
                     <a-Öa key1="value1" key2="value2">
                         <span>Test</span>
                     </a-Öa>
+                </div>`
+			);
+		});
+
+		it('Outputs error for multiple <!DOCTYPE>.', () => {
+			const result = new XMLParser(window).parse(
+				`<!DOCTYPE math SYSTEM "http://www.w3.org/Math/DTD/mathml1/mathml.dtd">
+                <!DOCTYPE html>
+                <html>
+                    <head></head>
+                    <body><div>Test</div></body>
+                </html>`
+			);
+
+			expect(new XMLSerializer().serializeToString(result)).toBe(
+				`<!DOCTYPE math SYSTEM "http://www.w3.org/Math/DTD/mathml1/mathml.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><body><parsererror style="display: block; white-space: pre; border: 2px solid #c77; padding: 0 1em 0 1em; margin: 1em; background-color: #fdd; color: black"><h3>This page contains the following errors:</h3><div style="font-family:monospace;font-size:12px">error on line 2 at column 18: StartTag: invalid element name
+</div><h3>Below is a rendering of the page up to the first error.</h3></parsererror></body></html>`
+			);
+		});
+
+		it('Outputs error when multiple document elements', () => {
+			const result = new XMLParser(window).parse(
+				`<root>
+                    <title>Title 1</title>
+                </root>
+                <secondRoot>
+                    <title>Title 2</title>
+                </secondRoot>`
+			);
+
+			expect(new XMLSerializer().serializeToString(result))
+				.toBe(`<root><parsererror xmlns="http://www.w3.org/1999/xhtml" style="display: block; white-space: pre; border: 2px solid #c77; padding: 0 1em 0 1em; margin: 1em; background-color: #fdd; color: black"><h3>This page contains the following errors:</h3><div style="font-family:monospace;font-size:12px">error on line 4 at column 17: Extra content at the end of the document
+</div><h3>Below is a rendering of the page up to the first error.</h3></parsererror>
+                    <title>Title 1</title>
+                </root>`);
+		});
+
+		it('Handles "xml" processing instruction.', () => {
+			const result = new XMLParser(window).parse(
+				`<?xml version="1.0" encoding="UTF-8"?>
+                <div>
+                    <div>Test</div>
+                </div>`
+			);
+
+			// The processing is never added to the DOM when target is "xml"
+			// Instead a flag is set on the document and it is added when serializing
+
+			expect(result.childNodes.length).toBe(1);
+			expect((<Element>result.childNodes[0]).tagName).toBe('div');
+
+			expect(new XMLSerializer().serializeToString(result)).toBe(
+				`<?xml version="1.0" encoding="UTF-8"?><div>
+                    <div>Test</div>
+                </div>`
+			);
+		});
+
+		it('Handles custom processing instructions.', () => {
+			const result = new XMLParser(window).parse(
+				`<?custom data="test"?>
+                <div>
+                    <div>Test</div>
+                </div>`
+			);
+
+			expect(new XMLSerializer().serializeToString(result)).toBe(
+				`<?custom data="test"?><div>
+                    <div>Test</div>
+                </div>`
+			);
+
+			expect(result.childNodes.length).toBe(2);
+			expect((<ProcessingInstruction>result.childNodes[0]).target).toBe('custom');
+			expect((<ProcessingInstruction>result.childNodes[0]).textContent).toBe('data="test"');
+			expect((<Element>result.childNodes[1]).tagName).toBe('div');
+		});
+
+		it('Handles namespaced XML', () => {
+			const result = new XMLParser(window).parse(
+				`<?xml version="1.0" encoding="UTF-8"?>
+                <personxml:person xmlns:personxml="http://www.your.example.com/xml/person" xmlns:cityxml="http://www.my.example.com/xml/cities">
+                    <personxml:name>Rob</personxml:name>
+                    <personxml:age>37</personxml:age>
+                    <cityxml:homecity>
+                        <cityxml:name>London</cityxml:name>
+                        <cityxml:lat>123.000</cityxml:lat>
+                        <cityxml:long>0.00</cityxml:long>
+                    </cityxml:homecity>
+                </personxml:person>`
+			);
+
+			expect(result.children[0].namespaceURI).toBe('http://www.your.example.com/xml/person');
+			expect(result.children[0].attributes[0].name).toBe('xmlns:personxml');
+			expect(result.children[0].attributes[0].value).toBe('http://www.your.example.com/xml/person');
+			expect(result.children[0].attributes[0].namespaceURI).toBe(NamespaceURI.xmlns);
+			expect(result.children[0].attributes[1].name).toBe('xmlns:cityxml');
+			expect(result.children[0].attributes[1].value).toBe('http://www.my.example.com/xml/cities');
+			expect(result.children[0].attributes[1].namespaceURI).toBe(NamespaceURI.xmlns);
+
+			expect(result.children[0].children[0].namespaceURI).toBe(
+				'http://www.your.example.com/xml/person'
+			);
+
+			expect(result.children[0].children[1].namespaceURI).toBe(
+				'http://www.your.example.com/xml/person'
+			);
+
+			expect(result.children[0].children[2].namespaceURI).toBe(
+				'http://www.my.example.com/xml/cities'
+			);
+
+			expect(result.children[0].children[2].children[0].namespaceURI).toBe(
+				'http://www.my.example.com/xml/cities'
+			);
+
+			expect(result.children[0].children[2].children[1].namespaceURI).toBe(
+				'http://www.my.example.com/xml/cities'
+			);
+
+			expect(result.children[0].children[2].children[2].namespaceURI).toBe(
+				'http://www.my.example.com/xml/cities'
+			);
+
+			expect(new XMLSerializer().serializeToString(result)).toBe(
+				`<?xml version="1.0" encoding="UTF-8"?><personxml:person xmlns:personxml="http://www.your.example.com/xml/person" xmlns:cityxml="http://www.my.example.com/xml/cities">
+                    <personxml:name>Rob</personxml:name>
+                    <personxml:age>37</personxml:age>
+                    <cityxml:homecity>
+                        <cityxml:name>London</cityxml:name>
+                        <cityxml:lat>123.000</cityxml:lat>
+                        <cityxml:long>0.00</cityxml:long>
+                    </cityxml:homecity>
+                </personxml:person>`
+			);
+		});
+
+		it('Handles default namespace', () => {
+			const result = new XMLParser(window).parse(
+				`<?xml version="1.0" encoding="UTF-8"?>
+                <root xmlns="http://www.example.com">
+                    <personxml:person xmlns:personxml="http://www.your.example.com/xml/person" xmlns:cityxml="http://www.my.example.com/xml/cities">
+                        <personxml:name>Rob</personxml:name>
+                        <personxml:age>37</personxml:age>
+                        <cityxml:homecity>
+                            <cityxml:name>London</cityxml:name>
+                            <cityxml:lat>123.000</cityxml:lat>
+                            <cityxml:long>0.00</cityxml:long>
+                        </cityxml:homecity>
+                        <homecity></homecity>
+                        <cityxml/>
+                        <test xmlns="http://www.other.com">
+                            <child/>
+                        </test>
+                    </personxml:person>
+                </root>`
+			);
+
+			expect(new XMLSerializer().serializeToString(result)).toBe(
+				`<?xml version="1.0" encoding="UTF-8"?><root xmlns="http://www.example.com">
+                    <personxml:person xmlns:personxml="http://www.your.example.com/xml/person" xmlns:cityxml="http://www.my.example.com/xml/cities">
+                        <personxml:name>Rob</personxml:name>
+                        <personxml:age>37</personxml:age>
+                        <cityxml:homecity>
+                            <cityxml:name>London</cityxml:name>
+                            <cityxml:lat>123.000</cityxml:lat>
+                            <cityxml:long>0.00</cityxml:long>
+                        </cityxml:homecity>
+                        <homecity/>
+                        <cityxml/>
+                        <test xmlns="http://www.other.com">
+                            <child/>
+                        </test>
+                    </personxml:person>
+                </root>`
+			);
+
+			expect(result.children[0].constructor.name).toBe('Element');
+
+			expect(result.children[0].namespaceURI).toBe('http://www.example.com');
+			expect(result.children[0].attributes[0].namespaceURI).toBe(NamespaceURI.xmlns);
+			expect(result.children[0].attributes[0].name).toBe('xmlns');
+			expect(result.children[0].attributes[0].value).toBe('http://www.example.com');
+
+			expect(result.children[0].children[0].namespaceURI).toBe(
+				'http://www.your.example.com/xml/person'
+			);
+			expect(result.children[0].children[0].attributes[0].name).toBe('xmlns:personxml');
+			expect(result.children[0].children[0].attributes[0].value).toBe(
+				'http://www.your.example.com/xml/person'
+			);
+			expect(result.children[0].children[0].attributes[0].namespaceURI).toBe(NamespaceURI.xmlns);
+			expect(result.children[0].children[0].attributes[1].name).toBe('xmlns:cityxml');
+			expect(result.children[0].children[0].attributes[1].value).toBe(
+				'http://www.my.example.com/xml/cities'
+			);
+			expect(result.children[0].children[0].attributes[1].namespaceURI).toBe(NamespaceURI.xmlns);
+
+			expect(result.children[0].children[0].children[0].namespaceURI).toBe(
+				'http://www.your.example.com/xml/person'
+			);
+
+			expect(result.children[0].children[0].children[1].namespaceURI).toBe(
+				'http://www.your.example.com/xml/person'
+			);
+
+			expect(result.children[0].children[0].children[2].namespaceURI).toBe(
+				'http://www.my.example.com/xml/cities'
+			);
+
+			expect(result.children[0].children[0].children[2].children[0].namespaceURI).toBe(
+				'http://www.my.example.com/xml/cities'
+			);
+
+			expect(result.children[0].children[0].children[2].children[1].namespaceURI).toBe(
+				'http://www.my.example.com/xml/cities'
+			);
+
+			expect(result.children[0].children[0].children[2].children[2].namespaceURI).toBe(
+				'http://www.my.example.com/xml/cities'
+			);
+
+			expect(result.children[0].children[0].children[3].namespaceURI).toBe(
+				'http://www.example.com'
+			);
+
+			expect(result.children[0].children[0].children[4].namespaceURI).toBe(
+				'http://www.example.com'
+			);
+
+			expect(result.children[0].children[0].children[5].namespaceURI).toBe('http://www.other.com');
+
+			expect(result.children[0].children[0].children[5].children[0].namespaceURI).toBe(
+				'http://www.other.com'
+			);
+		});
+
+		it('Outputs error for "xml" processing instructions not at the start of the document', () => {
+			const result = new XMLParser(window).parse(
+				`<div>
+                    <?xml version="1.0" encoding="UTF-8"?>
+                    <div>Test</div>
+                </div>`
+			);
+
+			expect(new XMLSerializer().serializeToString(result)).toBe(
+				`<div><parsererror xmlns="http://www.w3.org/1999/xhtml" style="display: block; white-space: pre; border: 2px solid #c77; padding: 0 1em 0 1em; margin: 1em; background-color: #fdd; color: black"><h3>This page contains the following errors:</h3><div style="font-family:monospace;font-size:12px">error on line 2 at column 26: XML declaration allowed only at the start of the document
+</div><h3>Below is a rendering of the page up to the first error.</h3></parsererror></div>`
+			);
+		});
+
+		it('Outputs error for "xml" processing instruction without version attribute', () => {
+			const result = new XMLParser(window).parse(
+				`<?xml encoding="UTF-8"?>
+                <div>
+                    <div>Test</div>
+                </div>`
+			);
+
+			expect(new XMLSerializer().serializeToString(result)).toBe(
+				`<html xmlns="http://www.w3.org/1999/xhtml"><body><parsererror style="display: block; white-space: pre; border: 2px solid #c77; padding: 0 1em 0 1em; margin: 1em; background-color: #fdd; color: black"><h3>This page contains the following errors:</h3><div style="font-family:monospace;font-size:12px">error on line 1 at column 7: Malformed declaration expecting version
+</div><h3>Below is a rendering of the page up to the first error.</h3></parsererror></body></html>`
+			);
+		});
+
+		it('Encodes HTML entities encoded.', () => {
+			const result = new XMLParser(window).parse(
+				`<root>
+                    <div>&gt;</div>
+                    <div id="testnode">&gt;howdy</div>
+                    <div>&gt;&lt;&amp;&quot;&apos;</div>
+                    <div>&#x3C;div&#x3E;Hello, world!&#x3C;/div&#x3E;</div>
+                </root>`
+			);
+
+			const div1 = result.documentElement.children[0];
+			expect(div1.textContent).toBe('>');
+
+			const div2 = result.documentElement.children[1];
+			expect(div2.textContent).toBe('>howdy');
+
+			const div3 = result.documentElement.children[2];
+			expect(div3.textContent).toBe('><&"\'');
+
+			const div4 = result.documentElement.children[3];
+			expect(div4.textContent).toBe('<div>Hello, world!</div>');
+
+			expect(new XMLSerializer().serializeToString(result)).toBe(
+				`<root>
+                    <div>&gt;</div>
+                    <div id="testnode">&gt;howdy</div>
+                    <div>&gt;&lt;&amp;"'</div>
+                    <div>&lt;div&gt;Hello, world!&lt;/div&gt;</div>
+                </root>`
+			);
+		});
+
+		it('Outputs error for the "&nbsp;" entity.', () => {
+			const result = new XMLParser(window).parse(`<div>
+                Hello&nbsp;World!
+            </div>`);
+
+			expect(new XMLSerializer().serializeToString(result))
+				.toBe(`<div><parsererror xmlns="http://www.w3.org/1999/xhtml" style="display: block; white-space: pre; border: 2px solid #c77; padding: 0 1em 0 1em; margin: 1em; background-color: #fdd; color: black"><h3>This page contains the following errors:</h3><div style="font-family:monospace;font-size:12px">error on line 2 at column 28: Entity 'nbsp' not defined
+</div><h3>Below is a rendering of the page up to the first error.</h3></parsererror></div>`);
+		});
+
+		it('Handles XML in #282', () => {
+			const result = new XMLParser(window).parse(
+				`<?xml version="1.0" encoding="UTF-8"?>
+                <!DOCTYPE start SYSTEM "http://xml.start.com/pub/start.dtd">
+                <start>
+                <div style="--en-clipped-content:fullPage; --en-clipped-source-url:https://l3pro.netlify.app/; --en-clipped-source-title:https://l3pro.netlify.app/;">
+                <div><br></br></div><div style="; font-size: 16px; display:inline-block; min-width: 100%; position: relative;"> <span><div>
+                <div>
+                    <h1 title="H1 " style="text-align:center;color:#006600;text-decoration:underline;"> This is a test </h1>
+                    <h2></h2>
+
+                    <p title="P " style="color:#660000;font-family:sans-serif;">This has some dynamic generated content</p>
+                    <p title="P " style="color:#660000;font-family:sans-serif;">This should be enought to test</p>
+                    <hr></hr>
+
+                    <p title="P " style="color:#660000;font-family:sans-serif;">Absolute paths</p>
+                    <img src="https://l3pro.netlify.app/celes.jpeg" width="50" height="100"></img>
+                    <img src="https://l3pro.netlify.app/img/guitar.jpeg" width="50" height="100"></img>
+                        <img src="https://l3pro.netlify.app/img/mk2.jpg" width="50" height="100"></img>
+                            <img src="https://l3pro.netlify.app/img/yo.png" width="50" height="100"></img>
+
+                <p title="P " style="color:#660000;font-family:sans-serif;">Relative paths</p>
+                    <img src="celes.jpeg" width="50" height="100"></img>
+                    <img src="img/guitar.jpeg" width="50" height="100"></img>
+                    <img src="img/mk2.jpg" width="50" height="100"></img>
+                                <img src="img/yo.png" width="50" height="100"></img>
+
+
+                    
+                
+
+                </div></div></span></div>
                 </div>
-                `.replace(/\s/gm, '')
+                </start>`
 			);
+
+			expect(new XMLSerializer().serializeToString(result)).toBe(
+				`<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE start SYSTEM "http://xml.start.com/pub/start.dtd"><start>
+                <div style="--en-clipped-content:fullPage; --en-clipped-source-url:https://l3pro.netlify.app/; --en-clipped-source-title:https://l3pro.netlify.app/;">
+                <div><br/></div><div style="; font-size: 16px; display:inline-block; min-width: 100%; position: relative;"> <span><div>
+                <div>
+                    <h1 title="H1 " style="text-align:center;color:#006600;text-decoration:underline;"> This is a test </h1>
+                    <h2/>
+
+                    <p title="P " style="color:#660000;font-family:sans-serif;">This has some dynamic generated content</p>
+                    <p title="P " style="color:#660000;font-family:sans-serif;">This should be enought to test</p>
+                    <hr/>
+
+                    <p title="P " style="color:#660000;font-family:sans-serif;">Absolute paths</p>
+                    <img src="https://l3pro.netlify.app/celes.jpeg" width="50" height="100"/>
+                    <img src="https://l3pro.netlify.app/img/guitar.jpeg" width="50" height="100"/>
+                        <img src="https://l3pro.netlify.app/img/mk2.jpg" width="50" height="100"/>
+                            <img src="https://l3pro.netlify.app/img/yo.png" width="50" height="100"/>
+
+                <p title="P " style="color:#660000;font-family:sans-serif;">Relative paths</p>
+                    <img src="celes.jpeg" width="50" height="100"/>
+                    <img src="img/guitar.jpeg" width="50" height="100"/>
+                    <img src="img/mk2.jpg" width="50" height="100"/>
+                                <img src="img/yo.png" width="50" height="100"/>
+
+
+                    
+                
+
+                </div></div></span></div>
+                </div>
+                </start>`
+			);
+		});
+
+		it('Supports comments with XML content.', () => {
+			const result = new XMLParser(window).parse(`<root>
+                <!-- <div>Test</div> -->
+            </root>`);
+
+			expect(result.childNodes[0].nodeType).toBe(NodeTypeEnum.elementNode);
+			expect(result.childNodes[0].childNodes[1].nodeType).toBe(NodeTypeEnum.commentNode);
+			expect(result.childNodes[0].childNodes[1].textContent).toBe(' <div>Test</div> ');
+
+			expect(new XMLSerializer().serializeToString(result)).toBe(`<root>
+                <!-- <div>Test</div> -->
+            </root>`);
+		});
+
+		it('Outputs error for unclosed comment', () => {
+			const result = new XMLParser(window).parse(`<root>
+                <!-- <div>Test</div>
+            </root>`);
+
+			expect(new XMLSerializer().serializeToString(result))
+				.toBe(`<root><parsererror xmlns="http://www.w3.org/1999/xhtml" style="display: block; white-space: pre; border: 2px solid #c77; padding: 0 1em 0 1em; margin: 1em; background-color: #fdd; color: black"><h3>This page contains the following errors:</h3><div style="font-family:monospace;font-size:12px">error on line 3 at column 20: Comment not terminated
+</div><h3>Below is a rendering of the page up to the first error.</h3></parsererror></root>`);
 		});
 	});
 });
diff --git a/packages/happy-dom/test/xml-parser/data/XMLParserHTML.ts b/packages/happy-dom/test/xml-parser/data/XMLParserHTML.ts
deleted file mode 100644
index fea879fc1..000000000
--- a/packages/happy-dom/test/xml-parser/data/XMLParserHTML.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-export default `
-	<!DOCTYPE html>
-	<html>
-		<head>
-			<title>Title</title>
-		</head>
-		<body>
-			<div class="class1 class2" id="id">
-				<!--Comment 1!-->
-				<?processing instruction?>
-				<?processing-instruction>
-				<!Exclamation mark comment>
-				<b>Bold</b>
-				<!-- Comment 2 !-->
-				<span>Span</span>
-                <!>
-			</div>
-			<article class="class1 class2" id="id">
-				<!-- Comment 1 !-->
-				<b>Bold</b>
-				<!-- Comment 2 !-->
-			</article>
-			<img>
-			<img />
-		</body>
-	</html>
-`.trim();
diff --git a/packages/happy-dom/test/xml-serializer/XMLSerializer.test.ts b/packages/happy-dom/test/xml-serializer/XMLSerializer.test.ts
index 5bc6bcb64..a06b19c29 100644
--- a/packages/happy-dom/test/xml-serializer/XMLSerializer.test.ts
+++ b/packages/happy-dom/test/xml-serializer/XMLSerializer.test.ts
@@ -4,6 +4,10 @@ import Document from '../../src/nodes/document/Document.js';
 import CustomElement from '../CustomElement.js';
 import * as PropertySymbol from '../../src/PropertySymbol.js';
 import { beforeEach, afterEach, describe, it, expect } from 'vitest';
+import HTMLParser from '../../src/html-parser/HTMLParser.js';
+import DocumentType from '../../src/nodes/document-type/DocumentType.js';
+import NamespaceURI from '../../src/config/NamespaceURI.js';
+import XMLParser from '../../src/xml-parser/XMLParser.js';
 
 describe('XMLSerializer', () => {
 	let window: Window;
@@ -37,7 +41,7 @@ describe('XMLSerializer', () => {
 			div.appendChild(span);
 
 			expect(xmlSerializer.serializeToString(div)).toBe(
-				'<div attr1="value1" attr2="value2" attr3=""><span attr1="value1" attr2="value2" attr3=""></span></div>'
+				'<div xmlns="http://www.w3.org/1999/xhtml" attr1="value1" attr2="value2" attr3=""><span attr1="value1" attr2="value2" attr3=""></span></div>'
 			);
 		});
 
@@ -50,7 +54,7 @@ describe('XMLSerializer', () => {
 			div.appendChild(img);
 
 			expect(xmlSerializer.serializeToString(div)).toBe(
-				'<div><img src="https://localhost/img.jpg"></div>'
+				'<div xmlns="http://www.w3.org/1999/xhtml"><img src="https://localhost/img.jpg" /></div>'
 			);
 		});
 
@@ -62,7 +66,9 @@ describe('XMLSerializer', () => {
 
 			div.appendChild(comment);
 
-			expect(xmlSerializer.serializeToString(div)).toBe('<div><!--Some comment.--></div>');
+			expect(xmlSerializer.serializeToString(div)).toBe(
+				'<div xmlns="http://www.w3.org/1999/xhtml"><!--Some comment.--></div>'
+			);
 		});
 
 		it('Serializes a text nodes.', () => {
@@ -73,14 +79,16 @@ describe('XMLSerializer', () => {
 			div.appendChild(text1);
 			div.appendChild(text2);
 
-			expect(xmlSerializer.serializeToString(div)).toBe('<div>Text 1.Text 2.</div>');
+			expect(xmlSerializer.serializeToString(div)).toBe(
+				'<div xmlns="http://www.w3.org/1999/xhtml">Text 1.Text 2.</div>'
+			);
 		});
 
 		it('Serializes a template node.', () => {
 			const template = document.createElement('template');
 			template.innerHTML = '<div>Test</div>';
 			expect(xmlSerializer.serializeToString(template)).toBe(
-				'<template><div>Test</div></template>'
+				'<template xmlns="http://www.w3.org/1999/xhtml"><div>Test</div></template>'
 			);
 		});
 
@@ -109,7 +117,7 @@ describe('XMLSerializer', () => {
 			div.appendChild(span1);
 
 			expect(xmlSerializer.serializeToString(div)).toBe(
-				'<div><!--Comment 1.-->Text 1.<!--Comment 2.-->Text 2.<span attr1="value1" attr2="value2" attr3=""><span attr1="value1">Text 3.</span></span></div>'
+				'<div xmlns="http://www.w3.org/1999/xhtml"><!--Comment 1.-->Text 1.<!--Comment 2.-->Text 2.<span attr1="value1" attr2="value2" attr3=""><span attr1="value1">Text 3.</span></span></div>'
 			);
 		});
 
@@ -127,127 +135,7 @@ describe('XMLSerializer', () => {
 			document.body.appendChild(div);
 
 			expect(xmlSerializer.serializeToString(div)).toBe(
-				'<div><custom-element attr1="value1" attr2="value2" attr3=""></custom-element></div>'
-			);
-		});
-
-		it('Includes shadow roots of custom elements when "allShadowRoots" is set as an option.', () => {
-			const div = document.createElement('div');
-			const customElement1 = document.createElement('custom-element');
-
-			CustomElement.shadowRootMode = 'closed';
-
-			const customElement2 = document.createElement('custom-element');
-
-			customElement1.setAttribute('key1', 'value1');
-			customElement1.setAttribute('key2', 'value2');
-			customElement1.innerHTML = '<span>Slotted content</span>';
-
-			customElement2.setAttribute('key1', 'value4');
-			customElement2.setAttribute('key2', 'value5');
-
-			div.appendChild(customElement1);
-			div.appendChild(customElement2);
-
-			// Connects the custom element to DOM which will trigger connectedCallback() on it
-			document.body.appendChild(div);
-
-			const xmlSerializer = new XMLSerializer();
-
-			xmlSerializer[PropertySymbol.options].allShadowRoots = true;
-
-			expect(xmlSerializer.serializeToString(div).replace(/[\s]/gm, '')).toBe(
-				`
-					<div>
-						<custom-element key1="value1" key2="value2">
-							<template shadowrootmode="open">
-								<style>
-									:host {
-										display: block;
-                                        font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
-									}
-									span {
-										color: pink;
-									}
-									.propKey {
-										color: yellow;
-									}
-								</style>
-								<div>
-									<span class="propKey">
-										key1 is "value1" and key2 is "value2".
-									</span>
-									<span class="children">
-                                        #1SPANSlottedcontent
-									</span>
-									<span><slot></slot></span>
-								</div>
-							</template>
-							<span>Slotted content</span>
-						</custom-element>
-						<custom-element key1="value4" key2="value5"></custom-element>
-					</div>`.replace(/[\s]/gm, '')
-			);
-		});
-
-		it('Renders the code from the documentation for server-side rendering as expected.', () => {
-			document.write(`
-                <html>
-                    <head>
-                         <title>Test page</title>
-                    </head>
-                    <body>
-                        <div>
-                            <my-custom-element>
-                                <span>Slotted content</span>
-                            </my-custom-element>
-                        </div>
-                        <script>
-                            class MyCustomElement extends HTMLElement {
-                                constructor() {
-                                    super();
-                                    this.attachShadow({ mode: 'open' });
-                                }
-            
-                                connectedCallback() {
-                                    this.shadowRoot.innerHTML = \`
-                                        <style>
-                                            :host {
-                                                display: inline-block;
-                                                background: red;
-                                            }
-                                        </style>
-                                        <div><slot></slot></div>
-                                    \`;
-                                }
-                            }
-            
-                            customElements.define('my-custom-element', MyCustomElement);
-                        </script>
-                    </body>
-                </html>
-            `);
-
-			expect(
-				document.body
-					.querySelector('div')
-					?.getInnerHTML({ includeShadowRoots: true })
-					.replace(/\s/gm, '')
-			).toBe(
-				`
-            <my-custom-element>
-                <template shadowrootmode="open">
-                    <style>
-                        :host {
-                            display: inline-block;
-                            background: red;
-                        }
-                    </style>
-                    <div><slot></slot></div>
-                </template>
-                <span>Slotted content</span>
-            </my-custom-element>
-            `.replace(/\s/gm, '')
+				'<div xmlns="http://www.w3.org/1999/xhtml"><custom-element attr1="value1" attr2="value2" attr3=""></custom-element></div>'
 			);
 		});
 
@@ -259,28 +147,25 @@ describe('XMLSerializer', () => {
 			div.setAttribute('attr3', '');
 
 			expect(xmlSerializer.serializeToString(div)).toBe(
-				'<div attr1="Hello ⁨John⁩" attr2="<span> test" attr3=""></div>'
+				'<div xmlns="http://www.w3.org/1999/xhtml" attr1="Hello ⁨John⁩" attr2="&lt;span&gt; test" attr3=""></div>'
 			);
 		});
 
-		it('Serializes the is value.', () => {
+		it('Doesn\'t serialize the "is" value.', () => {
 			const div = document.createElement('div', { is: 'custom-element' });
 
-			expect(xmlSerializer.serializeToString(div)).toBe('<div is="custom-element"></div>');
-		});
-
-		it('Ignores the is value if the is attribute is present.', () => {
-			const div = document.createElement('div', { is: 'custom-element' });
-			div.setAttribute('is', 'custom-replacement');
-
-			expect(xmlSerializer.serializeToString(div)).toBe('<div is="custom-replacement"></div>');
+			expect(xmlSerializer.serializeToString(div)).toBe(
+				'<div xmlns="http://www.w3.org/1999/xhtml"></div>'
+			);
 		});
 
 		it('Serializes text content.', () => {
 			const div = document.createElement('div');
 
 			div.innerText = '<b>a</b>';
-			expect(xmlSerializer.serializeToString(div)).toBe('<div>&lt;b&gt;a&lt;/b&gt;</div>');
+			expect(xmlSerializer.serializeToString(div)).toBe(
+				'<div xmlns="http://www.w3.org/1999/xhtml">&lt;b&gt;a&lt;/b&gt;</div>'
+			);
 		});
 
 		it('Serializes attributes to prevent injection attacks.', () => {
@@ -292,13 +177,283 @@ describe('XMLSerializer', () => {
 			a.textContent = "I'm a link!";
 
 			expect(xmlSerializer.serializeToString(a)).toBe(
-				`<a href="https://example.com&quot; style=&quot;font-size: 500%;">I'm a link!</a>`
+				`<a xmlns="http://www.w3.org/1999/xhtml" href="https://example.com&quot; style=&quot;font-size: 500%;">I'm a link!</a>`
 			);
 
 			document.body.innerHTML = `<a href="https://www.com/" style="background-image: url(&quot;https://cdn.cookie.org/image.svg&quot;);"></a>`;
 
-			expect(document.body.innerHTML).toBe(
-				`<a href="https://www.com/" style="background-image: url(&quot;https://cdn.cookie.org/image.svg&quot;);"></a>`
+			expect(xmlSerializer.serializeToString(document.body)).toBe(
+				`<body xmlns="http://www.w3.org/1999/xhtml"><a href="https://www.com/" style="background-image: url(&quot;https://cdn.cookie.org/image.svg&quot;);"></a></body>`
+			);
+		});
+
+		it('Serializes an entire HTML page.', () => {
+			const html = `
+	<!DOCTYPE html>
+	<html>
+		<head>
+			<title>Title</title>
+		</head>
+		<body>
+			<div class="class1 class2" id="id">
+				<!--Comment 1!-->
+				<?processing instruction?>
+				<?processing-instruction>
+				<!Exclamation mark comment>
+				<b>Bold</b>
+				<!-- Comment 2 !-->
+				<span>Span</span>
+                <!>
+			</div>
+			<article class="class1 class2" id="id">
+				<!-- Comment 1 !-->
+				<b>Bold</b>
+				<!-- Comment 2 !-->
+			</article>
+			<img>
+			<img />
+		</body>
+	</html>
+`;
+			const expected = `<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>
+			<title>Title</title>
+		</head>
+		<body>
+			<div class="class1 class2" id="id">
+				<!--Comment 1!-->
+				<!--?processing instruction?-->
+				<!--?processing-instruction-->
+				<!--Exclamation mark comment-->
+				<b>Bold</b>
+				<!-- Comment 2 !-->
+				<span>Span</span>
+                <!---->
+			</div>
+			<article class="class1 class2" id="id">
+				<!-- Comment 1 !-->
+				<b>Bold</b>
+				<!-- Comment 2 !-->
+			</article>
+			<img />
+			<img />
+		
+	
+</body></html>`;
+			const result = new HTMLParser(window).parse(
+				html,
+				window.document.implementation.createHTMLDocument()
+			);
+			expect(new XMLSerializer().serializeToString(result)).toBe(expected);
+		});
+
+		it('Serializes a page with document type set to "HTML 4.01".', () => {
+			const html = `
+	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+	<html>
+		<head>
+			<title>Title</title>
+		</head>
+		<body>
+			<div class="class1 class2" id="id">
+				<!--Comment 1!-->
+				<?processing instruction?>
+				<?processing-instruction>
+				<!Exclamation mark comment>
+				<b>Bold</b>
+				<!-- Comment 2 !-->
+				<span>Span</span>
+                <!>
+			</div>
+			<article class="class1 class2" id="id">
+				<!-- Comment 1 !-->
+				<b>Bold</b>
+				<!-- Comment 2 !-->
+			</article>
+			<img>
+			<img />
+		</body>
+	</html>
+`;
+			const expected = `<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>
+			<title>Title</title>
+		</head>
+		<body>
+			<div class="class1 class2" id="id">
+				<!--Comment 1!-->
+				<!--?processing instruction?-->
+				<!--?processing-instruction-->
+				<!--Exclamation mark comment-->
+				<b>Bold</b>
+				<!-- Comment 2 !-->
+				<span>Span</span>
+                <!---->
+			</div>
+			<article class="class1 class2" id="id">
+				<!-- Comment 1 !-->
+				<b>Bold</b>
+				<!-- Comment 2 !-->
+			</article>
+			<img />
+			<img />
+		
+	
+</body></html>`;
+
+			const result = new HTMLParser(window).parse(
+				html,
+				window.document.implementation.createHTMLDocument()
+			);
+			const doctype = <DocumentType>result.childNodes[0];
+			expect(doctype.name).toBe('html');
+			expect(doctype.publicId).toBe('-//W3C//DTD HTML 4.01//EN');
+			expect(doctype.systemId).toBe('http://www.w3.org/TR/html4/strict.dtd');
+			expect(new XMLSerializer().serializeToString(result)).toBe(expected);
+		});
+
+		it('Serializes HTML elements with "noDescendants" content model with " />" as ending.', () => {
+			const html = `
+                <root xmlns="${NamespaceURI.html}">
+                    <area></area>
+                    <base></base>
+                    <br></br>
+                    <col></col>
+                    <embed></embed>
+                    <hr></hr>
+                    <img></img>
+                    <input></input>
+                    <link></link>
+                    <meta></meta>
+                    <param></param>
+                    <source></source>
+                    <track></track>
+                    <wbr></wbr>
+                    <div></div>
+                    <span></span>
+                    <p></p>
+                    <h1></h1>
+                </root>
+            `;
+
+			const result = new XMLParser(window).parse(html);
+
+			expect(new XMLSerializer().serializeToString(result)).toBe(
+				`<root xmlns="${NamespaceURI.html}">
+                    <area />
+                    <base />
+                    <br />
+                    <col />
+                    <embed />
+                    <hr />
+                    <img />
+                    <input />
+                    <link />
+                    <meta />
+                    <param />
+                    <source />
+                    <track />
+                    <wbr />
+                    <div></div>
+                    <span></span>
+                    <p></p>
+                    <h1></h1>
+                </root>`
+			);
+		});
+
+		it('Serializes XML with prefix namespaces', () => {
+			const result = new XMLParser(window).parse(
+				`<?xml version="1.0" encoding="UTF-8"?>
+                <root xmlns="http://www.example.com">
+                    <personxml:person xmlns:personxml="http://www.your.example.com/xml/person" xmlns:cityxml="http://www.my.example.com/xml/cities">
+                        <personxml:name>Rob</personxml:name>
+                        <personxml:age>37</personxml:age>
+                        <cityxml:homecity>
+                            <cityxml:name>London</cityxml:name>
+                            <cityxml:lat>123.000</cityxml:lat>
+                            <cityxml:long>0.00</cityxml:long>
+                        </cityxml:homecity>
+                        <homecity></homecity>
+                        <cityxml/>
+                        <test xmlns="http://www.other.com">
+                            <child/>
+                        </test>
+                    </personxml:person>
+                </root>`
+			);
+
+			expect(new XMLSerializer().serializeToString(result)).toBe(
+				`<?xml version="1.0" encoding="UTF-8"?><root xmlns="http://www.example.com">
+                    <personxml:person xmlns:personxml="http://www.your.example.com/xml/person" xmlns:cityxml="http://www.my.example.com/xml/cities">
+                        <personxml:name>Rob</personxml:name>
+                        <personxml:age>37</personxml:age>
+                        <cityxml:homecity>
+                            <cityxml:name>London</cityxml:name>
+                            <cityxml:lat>123.000</cityxml:lat>
+                            <cityxml:long>0.00</cityxml:long>
+                        </cityxml:homecity>
+                        <homecity/>
+                        <cityxml/>
+                        <test xmlns="http://www.other.com">
+                            <child/>
+                        </test>
+                    </personxml:person>
+                </root>`
+			);
+		});
+
+		it('Handles template elements correctly for the HTML namespace.', () => {
+			const html = `
+                <root xmlns="${NamespaceURI.html}">
+                    <template>
+                        <div>Test</div>
+                    </template>
+                </root>
+            `;
+
+			const result = new XMLParser(window).parse(html);
+
+			expect(new XMLSerializer().serializeToString(result)).toBe(
+				`<root xmlns="${NamespaceURI.html}">
+                    <template>
+                        <div>Test</div>
+                    </template>
+                </root>`
+			);
+		});
+
+		it('Handles template elements correctly for the XML namespace.', () => {
+			const html = `
+                <root>
+                    <template>
+                        <div>Test</div>
+                    </template>
+                </root>
+            `;
+
+			const result = new XMLParser(window).parse(html);
+
+			expect(new XMLSerializer().serializeToString(result)).toBe(
+				`<root>
+                    <template>
+                        <div>Test</div>
+                    </template>
+                </root>`
+			);
+		});
+
+		it('Handles custom processing instructions.', () => {
+			const html = `
+                <root>
+                    <?custom-instruction version="1.0"?>
+                </root>
+            `;
+
+			const result = new XMLParser(window).parse(html);
+
+			expect(new XMLSerializer().serializeToString(result)).toBe(
+				`<root>
+                    <?custom-instruction version="1.0"?>
+                </root>`
 			);
 		});
 	});
diff --git a/packages/integration-test/test/utilities/TestFunctions.js b/packages/integration-test/test/utilities/TestFunctions.js
index 88a904990..3359a1629 100644
--- a/packages/integration-test/test/utilities/TestFunctions.js
+++ b/packages/integration-test/test/utilities/TestFunctions.js
@@ -43,7 +43,7 @@ export function run(description, callback) {
 						hasError = true;
 						hasTimedout = true;
 						resolve();
-					}, 90000);
+					}, 90000 * 100);
 					result
 						.then(() => {
 							if (!hasTimedout) {