#1176@patch: Custom Elements letter case handling.

mash-graz · mash-graz · commit 8f3bbe16e1c5 · 2023-12-10T11:39:24.000+01:00
diff --git a/packages/happy-dom/src/custom-element/CustomElementRegistry.ts b/packages/happy-dom/src/custom-element/CustomElementRegistry.ts
@@ -12,10 +12,10 @@ export default class CustomElementRegistry {
 	/**
 	 * Validates the correctness of custom element tag names.
 	 *
-	 * @param tagName custom element tag name.
+	 * @param localName custom element tag name.
 	 * @returns boolean True, if tag name is standard compliant.
 	 */
-	private isValidCustomElementName(tagName: string): boolean {
+	private isValidCustomElementName(localName: string): boolean {
 		// Validation criteria based on:
 		// https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name
 		const PCENChar =
@@ -27,7 +27,7 @@ export default class CustomElementRegistry {
 
 		const PCEN = new RegExp(`^[a-z](${PCENChar})*-(${PCENChar})*$`, 'u');
 
-		const forbiddenNames = [
+		const reservedNames = [
 			'annotation-xml',
 			'color-profile',
 			'font-face',
@@ -37,33 +37,31 @@ export default class CustomElementRegistry {
 			'font-face-name',
 			'missing-glyph'
 		];
-		return PCEN.test(tagName) && !forbiddenNames.includes(tagName);
+		return PCEN.test(localName) && !reservedNames.includes(localName);
 	}
 
 	/**
 	 * Defines a custom element class.
 	 *
-	 * @param tagName Tag name of element.
+	 * @param localName Tag name of element.
 	 * @param elementClass Element class.
 	 * @param [options] Options.
 	 * @param options.extends
 	 */
 	public define(
-		tagName: string,
+		localName: string,
 		elementClass: typeof HTMLElement,
 		options?: { extends: string }
 	): void {
-		const upperTagName = tagName.toUpperCase();
-
-		if (!upperTagName.includes('-')) {
+		if (!this.isValidCustomElementName(localName)) {
 			throw new DOMException(
 				"Failed to execute 'define' on 'CustomElementRegistry': \"" +
-					tagName +
+					localName +
 					'" is not a valid custom element name.'
 			);
 		}
 
-		this._registry[upperTagName] = {
+		this._registry[localName] = {
 			elementClass,
 			extends: options && options.extends ? options.extends.toLowerCase() : null
 		};
@@ -73,9 +71,9 @@ export default class CustomElementRegistry {
 			elementClass._observedAttributes = elementClass.observedAttributes;
 		}
 
-		if (this._callbacks[upperTagName]) {
-			const callbacks = this._callbacks[upperTagName];
-			delete this._callbacks[upperTagName];
+		if (this._callbacks[localName]) {
+			const callbacks = this._callbacks[localName];
+			delete this._callbacks[localName];
 			for (const callback of callbacks) {
 				callback();
 			}
@@ -85,12 +83,11 @@ export default class CustomElementRegistry {
 	/**
 	 * Returns a defined element class.
 	 *
-	 * @param tagName Tag name of element.
+	 * @param localName Tag name of element.
 	 * @param HTMLElement Class defined.
 	 */
-	public get(tagName: string): typeof HTMLElement {
-		const upperTagName = tagName.toUpperCase();
-		return this._registry[upperTagName] ? this._registry[upperTagName].elementClass : undefined;
+	public get(localName: string): typeof HTMLElement {
+		return this._registry[localName] ? this._registry[localName].elementClass : undefined;
 	}
 
 	/**
@@ -107,17 +104,19 @@ export default class CustomElementRegistry {
 	/**
 	 * When defined.
 	 *
-	 * @param tagName Tag name of element.
+	 * @param localName Tag name of element.
 	 * @returns Promise.
 	 */
-	public whenDefined(tagName: string): Promise<void> {
-		const upperTagName = tagName.toUpperCase();
-		if (this.get(upperTagName)) {
+	public whenDefined(localName: string): Promise<void> {
+		if (!this.isValidCustomElementName(localName)) {
+			return Promise.reject(new DOMException(`Invalid custom element name: "${localName}"`));
+		}
+		if (this.get(localName)) {
 			return Promise.resolve();
 		}
 		return new Promise((resolve) => {
-			this._callbacks[upperTagName] = this._callbacks[upperTagName] || [];
-			this._callbacks[upperTagName].push(resolve);
+			this._callbacks[localName] = this._callbacks[localName] || [];
+			this._callbacks[localName].push(resolve);
 		});
 	}
 
@@ -128,9 +127,9 @@ export default class CustomElementRegistry {
 	 * @returns First found Tag name or `null`.
 	 */
 	public getName(elementClass: typeof HTMLElement): string | null {
-		const tagName = Object.keys(this._registry).find(
+		const localName = Object.keys(this._registry).find(
 			(k) => this._registry[k].elementClass === elementClass
 		);
-		return !!tagName ? tagName : null;
+		return !!localName ? localName : null;
 	}
 }
diff --git a/packages/happy-dom/src/nodes/document/Document.ts b/packages/happy-dom/src/nodes/document/Document.ts
@@ -823,7 +823,7 @@ export default class Document extends Node implements IDocument {
 		if (this.defaultView && options && options.is) {
 			customElementClass = this.defaultView.customElements.get(String(options.is));
 		} else if (this.defaultView) {
-			customElementClass = this.defaultView.customElements.get(tagName);
+			customElementClass = this.defaultView.customElements.get(String(qualifiedName));
 		}
 
 		const elementClass: typeof Element =
diff --git a/packages/happy-dom/src/nodes/html-unknown-element/HTMLUnknownElement.ts b/packages/happy-dom/src/nodes/html-unknown-element/HTMLUnknownElement.ts
@@ -23,17 +23,17 @@ export default class HTMLUnknownElement extends HTMLElement implements IHTMLElem
 	 * @param parentNode Parent node.
 	 */
 	public _connectToNode(parentNode: INode = null): void {
-		const tagName = this.tagName;
+		const localName = this.localName;
 
 		// This element can potentially be a custom element that has not been defined yet
 		// Therefore we need to register a callback for when it is defined in CustomElementRegistry and replace it with the registered element (see #404)
-		if (tagName.includes('-') && this.ownerDocument.defaultView.customElements._callbacks) {
+		if (localName.includes('-') && this.ownerDocument.defaultView.customElements._callbacks) {
 			const callbacks = this.ownerDocument.defaultView.customElements._callbacks;
 
 			if (parentNode && !this._customElementDefineCallback) {
 				const callback = (): void => {
 					if (this.parentNode) {
-						const newElement = <HTMLElement>this.ownerDocument.createElement(tagName);
+						const newElement = <HTMLElement>this.ownerDocument.createElement(localName);
 						(<INodeList<INode>>newElement._childNodes) = this._childNodes;
 						(<IHTMLCollection<IElement>>newElement._children) = this._children;
 						(<boolean>newElement.isConnected) = this.isConnected;
@@ -82,16 +82,16 @@ export default class HTMLUnknownElement extends HTMLElement implements IHTMLElem
 						this._connectToNode(null);
 					}
 				};
-				callbacks[tagName] = callbacks[tagName] || [];
-				callbacks[tagName].push(callback);
+				callbacks[localName] = callbacks[localName] || [];
+				callbacks[localName].push(callback);
 				this._customElementDefineCallback = callback;
-			} else if (!parentNode && callbacks[tagName] && this._customElementDefineCallback) {
-				const index = callbacks[tagName].indexOf(this._customElementDefineCallback);
+			} else if (!parentNode && callbacks[localName] && this._customElementDefineCallback) {
+				const index = callbacks[localName].indexOf(this._customElementDefineCallback);
 				if (index !== -1) {
-					callbacks[tagName].splice(index, 1);
+					callbacks[localName].splice(index, 1);
 				}
-				if (!callbacks[tagName].length) {
-					delete callbacks[tagName];
+				if (!callbacks[localName].length) {
+					delete callbacks[localName];
 				}
 				this._customElementDefineCallback = null;
 			}
diff --git a/packages/happy-dom/src/xml-parser/XMLParser.ts b/packages/happy-dom/src/xml-parser/XMLParser.ts
@@ -107,6 +107,7 @@ export default class XMLParser {
 							// Start tag.
 
 							const tagName = match[1].toUpperCase();
+							const localName = match[1];
 
 							// 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>").
@@ -130,7 +131,7 @@ export default class XMLParser {
 								tagName === 'SVG'
 									? NamespaceURI.svg
 									: (<IElement>currentNode).namespaceURI || NamespaceURI.html;
-							const newElement = document.createElementNS(namespaceURI, tagName);
+							const newElement = document.createElementNS(namespaceURI, localName);
 
 							currentNode.appendChild(newElement);
 							currentNode = newElement;
diff --git a/packages/happy-dom/test/custom-element/CustomElementRegistry.test.ts b/packages/happy-dom/test/custom-element/CustomElementRegistry.test.ts
@@ -1,11 +1,19 @@
 import CustomElement from '../CustomElement.js';
 import CustomElementRegistry from '../../src/custom-element/CustomElementRegistry.js';
+import IWindow from '../../src/window/IWindow.js';
+import IDocument from '../../src/nodes/document/IDocument.js';
+import Window from '../../src/window/Window.js';
 import { beforeEach, describe, it, expect } from 'vitest';
+import { rejects } from 'assert';
 
 describe('CustomElementRegistry', () => {
 	let customElements;
+	let window: IWindow;
+	let document: IDocument;
 
 	beforeEach(() => {
+		window = new Window();
+		document = window.document;
 		customElements = new CustomElementRegistry();
 		CustomElement.observedAttributesCallCount = 0;
 	});
@@ -21,6 +29,7 @@ describe('CustomElementRegistry', () => {
 			expect(customElements.isValidCustomElementName('a-\u00d9')).toBe(true);
 			expect(customElements.isValidCustomElementName('a_b.c-d')).toBe(true);
 			expect(customElements.isValidCustomElementName('font-face')).toBe(false);
+			expect(customElements.isValidCustomElementName('a-Öa')).toBe(true);
 		});
 	});
 
@@ -35,7 +44,7 @@ describe('CustomElementRegistry', () => {
 				extends: 'ul'
 			});
 			expect(customElements.get('custom-element')).toBe(CustomElement);
-			expect(customElements._registry['CUSTOM-ELEMENT'].extends).toBe('ul');
+			expect(customElements._registry['custom-element'].extends).toBe('ul');
 		});
 
 		it('Throws an error if tag name does not contain "-".', () => {
@@ -54,6 +63,11 @@ describe('CustomElementRegistry', () => {
 			expect(CustomElement.observedAttributesCallCount).toBe(1);
 			expect(CustomElement._observedAttributes).toEqual(['key1', 'key2']);
 		});
+
+		it('Non-ASCII capital letter in localName.', () => {
+			customElements.define('a-Öa', CustomElement);
+			expect(customElements.get('a-Öa')).toBe(CustomElement);
+		});
 	});
 
 	describe('get()', () => {
@@ -65,9 +79,19 @@ describe('CustomElementRegistry', () => {
 		it('Returns undefined if the tag name has not been defined.', () => {
 			expect(customElements.get('custom-element')).toBe(undefined);
 		});
+
+		it('Case sensitivity of get().', () => {
+			customElements.define('custom-element', CustomElement);
+			expect(customElements.get('CUSTOM-ELEMENT')).toBe(undefined);
+		});
 	});
 
 	describe('whenDefined()', () => {
+		it('Throws an error if tag name looks invalide', async () => {
+			const tagName = 'element';
+			expect(async() => await customElements.whenDefined(tagName)).rejects.toThrow();
+		});
+
 		it('Returns a promise which is fulfilled when an element is defined.', async () => {
 			await new Promise((resolve) => {
 				customElements.whenDefined('custom-element').then(resolve);
@@ -90,7 +114,19 @@ describe('CustomElementRegistry', () => {
 
 		it('Returns Tag name if element class is found in registry', () => {
 			customElements.define('custom-element', CustomElement);
-			expect(customElements.getName(CustomElement)).toMatch(/custom-element/i);
+			expect(customElements.getName(CustomElement)).toMatch('custom-element');
+		});
+	});
+
+	describe('createElement()', () => {
+		it('Case insensitive access via document.createElement()', () => {
+			customElements.define('custom-element', CustomElement);
+			expect(document.createElement('CUSTOM-ELEMENT').localName).toBe('custom-element');
+		});
+
+		it('Non-ASCII capital letters in document.createElement()', () => {
+			customElements.define('a-Öa', CustomElement);
+			expect(document.createElement('a-Öa').localName).toMatch(/a-Öa/i);
 		});
 	});
 });
diff --git a/packages/happy-dom/test/nodes/html-unknown-element/HTMLUnknownElement.test.ts b/packages/happy-dom/test/nodes/html-unknown-element/HTMLUnknownElement.test.ts
@@ -22,7 +22,7 @@ describe('HTMLUnknownElement', () => {
 
 			parent.appendChild(element);
 
-			expect(window.customElements._callbacks['CUSTOM-ELEMENT'].length).toBe(1);
+			expect(window.customElements._callbacks['custom-element'].length).toBe(1);
 
 			parent.removeChild(element);
 

Original file line number	Diff line number	Diff line change
`@@ -823,7 +823,7 @@ export default class Document extends Node implements IDocument {`
`823`	`823`	`if (this.defaultView && options && options.is) {`
`824`	`824`	`customElementClass = this.defaultView.customElements.get(String(options.is));`
`825`	`825`	`} else if (this.defaultView) {`
`826`		`- customElementClass = this.defaultView.customElements.get(tagName);`
	`826`	`+ customElementClass = this.defaultView.customElements.get(String(qualifiedName));`
`827`	`827`	`}`
`828`	`828`
`829`	`829`	`const elementClass: typeof Element =`