Merge pull request #1357 from capricorn86/1354-incorrect-custom-eleme…

…nt-tag-name-in-innerhtml fix: [#1354] Fixes bug where the tag name for custom elements constru…
capricorn86 · Mar 24, 2024 · 06b556c · 06b556c
2 parents 1fa9701 + 1c57ecc
commit 06b556c
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 24 deletions.
diff --git a/packages/happy-dom/src/custom-element/CustomElementRegistry.ts b/packages/happy-dom/src/custom-element/CustomElementRegistry.ts
@@ -59,27 +59,9 @@ export default class CustomElementRegistry {
 		const tagName = name.toUpperCase();
 
 		elementClass[PropertySymbol.ownerDocument] = this.#window.document;
-
-		Object.defineProperty(elementClass.prototype, 'localName', {
-			configurable: true,
-			get: function () {
-				return this[PropertySymbol.localName] || name;
-			}
-		});
-
-		Object.defineProperty(elementClass.prototype, 'tagName', {
-			configurable: true,
-			get: function () {
-				return this[PropertySymbol.tagName] || tagName;
-			}
-		});
-
-		Object.defineProperty(elementClass.prototype, 'namespaceURI', {
-			configurable: true,
-			get: function () {
-				return this[PropertySymbol.namespaceURI] || NamespaceURI.html;
-			}
-		});
+		elementClass[PropertySymbol.tagName] = tagName;
+		elementClass[PropertySymbol.localName] = name;
+		elementClass[PropertySymbol.namespaceURI] = NamespaceURI.html;
 
 		this[PropertySymbol.registry][name] = {
 			elementClass,

diff --git a/packages/happy-dom/src/nodes/element/Element.ts b/packages/happy-dom/src/nodes/element/Element.ts
@@ -45,6 +45,9 @@ export default class Element
 	// 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[];
 
 	// Events
@@ -89,16 +92,18 @@ export default class Element
 	public [PropertySymbol.isValue]: string | null = null;
 	public [PropertySymbol.computedStyle]: CSSStyleDeclaration | null = null;
 	public [PropertySymbol.nodeType] = NodeTypeEnum.elementNode;
-	public [PropertySymbol.tagName]: string | null = null;
-	public [PropertySymbol.localName]: string | null = null;
+	public [PropertySymbol.tagName]: string | null = this.constructor[PropertySymbol.tagName] || null;
+	public [PropertySymbol.localName]: string | null =
+		this.constructor[PropertySymbol.localName] || null;
 	public [PropertySymbol.prefix]: string | null = null;
 	public [PropertySymbol.shadowRoot]: ShadowRoot | null = null;
 	public [PropertySymbol.scrollHeight] = 0;
 	public [PropertySymbol.scrollWidth] = 0;
 	public [PropertySymbol.scrollTop] = 0;
 	public [PropertySymbol.scrollLeft] = 0;
 	public [PropertySymbol.attributes]: NamedNodeMap = new ElementNamedNodeMap(this);
-	public [PropertySymbol.namespaceURI]: string | null = null;
+	public [PropertySymbol.namespaceURI]: string | null =
+		this.constructor[PropertySymbol.namespaceURI] || null;
 
 	/**
 	 * Returns tag name.

diff --git a/packages/happy-dom/test/custom-element/CustomElementRegistry.test.ts b/packages/happy-dom/test/custom-element/CustomElementRegistry.test.ts
@@ -40,12 +40,18 @@ describe('CustomElementRegistry', () => {
 
 		it('Can construct CustomElement instance using "new".', () => {
 			customElements.define('custom-element', CustomElement);
+
 			const customElement = new CustomElement();
+
 			expect(customElement).toBeInstanceOf(CustomElement);
 			expect(customElement.ownerDocument).toBe(document);
 			expect(customElement.localName).toBe('custom-element');
 			expect(customElement.tagName).toBe('CUSTOM-ELEMENT');
 			expect(customElement.namespaceURI).toBe(NamespaceURI.html);
+
+			const container = document.createElement('div');
+			container.appendChild(customElement);
+			expect(container.innerHTML).toBe('<custom-element></custom-element>');
 		});
 
 		it('Throws an error if tag name does not contain "-".', () => {