fix: [#1945] Elements should only be upgraded to a custom element when the element is in the document (#1945)

Author: capricorn86

packages/happy-dom/src/nodes/html-element/HTMLElement.ts

@@ -985,7 +985,7 @@ export default class HTMLElement extends Element {
 	 * @override
 	 * @see https://html.spec.whatwg.org/multipage/dom.html#htmlelement
 	 */
-	public override [PropertySymbol.connectedToNode](): void {
+	public override [PropertySymbol.connectedToDocument](): void {
 		const window = this[PropertySymbol.window];
 		const localName = this[PropertySymbol.localName]!;
 		const allCallbacks = window.customElements[PropertySymbol.callbacks];
@@ -1005,13 +1005,13 @@ export default class HTMLElement extends Element {
 			}
 		}
 
-		super[PropertySymbol.connectedToNode]();
+		super[PropertySymbol.connectedToDocument]();
 	}
 
 	/**
 	 * @override
 	 */
-	public override [PropertySymbol.disconnectedFromNode](): void {
+	public override [PropertySymbol.disconnectedFromDocument](): void {
 		const window = this[PropertySymbol.window];
 		const localName = this[PropertySymbol.localName]!;
 		const allCallbacks = window.customElements[PropertySymbol.callbacks];
@@ -1033,7 +1033,7 @@ export default class HTMLElement extends Element {
 			}
 		}
 
-		super[PropertySymbol.disconnectedFromNode]();
+		super[PropertySymbol.disconnectedFromDocument]();
 	}
 
 	/**

packages/happy-dom/test/nodes/html-element/HTMLElement.test.ts

@@ -715,12 +715,17 @@ describe('HTMLElement', () => {
 	});
 
 	describe('[PropertySymbol.connectNode]()', () => {
-		it('Waits for a custom element to be defined and replace it when it is.', () => {
+		it("Waits for a custom element to be defined and replace it when it's connected to document", () => {
 			const element = <HTMLElement>document.createElement('custom-element');
 			const parent = document.createElement('div');
 
 			parent.appendChild(element);
 
+			expect(parent.children[0] instanceof HTMLElement).toBe(true);
+			expect(Object.keys(window.customElements[PropertySymbol.callbacks]).length).toBe(0);
+
+			document.body.appendChild(parent);
+
 			expect(window.customElements[PropertySymbol.callbacks].get('custom-element')?.length).toBe(1);
 
 			parent.removeChild(element);
@@ -729,15 +734,13 @@ describe('HTMLElement', () => {
 
 			parent.appendChild(element);
 
+			expect(window.customElements[PropertySymbol.callbacks].get('custom-element')?.length).toBe(1);
+
 			window.customElements.define('custom-element', CustomElement);
 
 			expect(parent.children.length).toBe(1);
 
 			expect(parent.children[0] instanceof CustomElement).toBe(true);
-			expect(parent.children[0].shadowRoot?.children.length).toBe(0);
-
-			document.body.appendChild(parent);
-
 			expect(parent.children[0].shadowRoot?.children.length).toBe(2);
 		});