fix: [#1634] Fixes the implementation for the HTMLTableCellElement.headers property

Author: capricorn86

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

@@ -613,15 +613,10 @@ export default class HTMLElement extends Element {
 	public override [PropertySymbol.connectedToDocument](): void {
 		super[PropertySymbol.connectedToDocument]();
 
-		if (
-			this[PropertySymbol.ownerDocument][PropertySymbol.window].document ===
-			this[PropertySymbol.ownerDocument]
-		) {
-			this[PropertySymbol.window][PropertySymbol.customElementReactionStack].enqueueReaction(
-				this,
-				'connectedCallback'
-			);
-		}
+		this[PropertySymbol.window][PropertySymbol.customElementReactionStack].enqueueReaction(
+			this,
+			'connectedCallback'
+		);
 	}
 
 	/**
@@ -630,15 +625,10 @@ export default class HTMLElement extends Element {
 	public override [PropertySymbol.disconnectedFromDocument](): void {
 		super[PropertySymbol.disconnectedFromDocument]();
 
-		if (
-			this[PropertySymbol.ownerDocument][PropertySymbol.window].document ===
-			this[PropertySymbol.ownerDocument]
-		) {
-			this[PropertySymbol.window][PropertySymbol.customElementReactionStack].enqueueReaction(
-				this,
-				'disconnectedCallback'
-			);
-		}
+		this[PropertySymbol.window][PropertySymbol.customElementReactionStack].enqueueReaction(
+			this,
+			'disconnectedCallback'
+		);
 	}
 
 	/**

packages/happy-dom/src/nodes/html-table-cell-element/HTMLTableCellElement.ts

@@ -69,19 +69,22 @@ export default class HTMLTableCellElement extends HTMLElement {
 	}
 
 	/**
-	 * A DOMTokenList describing a list of id of <th> elements that represent headers associated with the cell. It reflects the headers attribute.
+	 * Returns headers.
 	 *
-	 * @returns Headers.
+	 * @returns headers.
 	 */
-	public get headers(): DOMTokenList {
-		if (!this[PropertySymbol.headers]) {
-			this[PropertySymbol.headers] = new DOMTokenList(
-				PropertySymbol.illegalConstructor,
-				this,
-				'headers'
-			);
-		}
-		return <DOMTokenList>this[PropertySymbol.headers];
+	public get headers(): string {
+		return this.getAttribute('headers') || '';
+	}
+
+	/**
+	 * Sets headers.
+	 *
+	 * @param value headers.
+	 */
+	public set headers(value: string) {
+		this.setAttribute('headers', String(value));
+		// TODO: implement metadata update if needed.
 	}
 
 	/**

packages/happy-dom/test/nodes/html-table-cell-element/HTMLTableCellElement.test.ts

@@ -95,15 +95,27 @@ describe('HTMLTableCellElement', () => {
 	});
 
 	describe('get headers()', () => {
-		it('Should return a DOMTokenList describing a list of id of <th> elements', () => {
-			expect(element.headers).instanceOf(DOMTokenList);
-			expect(element.headers).toBe(element.headers);
+		it('Should return an empty string by default', () => {
+			expect(element.headers).toBe('');
+		});
+
+		it('Should return the attribute value', () => {
+			element.setAttribute('headers', 'header1 header2');
+			expect(element.headers).toBe('header1 header2');
+		});
+	});
 
-			element.setAttribute('headers', 'id1 id2');
+	describe('set headers()', () => {
+		it('Should set the attribute value', () => {
+			element.headers = 'header1 header2';
+			expect(element.getAttribute('headers')).toBe('header1 header2');
+		});
 
-			expect(element.headers.length).toBe(2);
-			expect(element.headers[0]).toBe('id1');
-			expect(element.headers[1]).toBe('id2');
+		it('Should stringify the value', () => {
+			element.headers = <string>(<unknown>1);
+			expect(element.getAttribute('headers')).toBe('1');
+			element.headers = <string>(<unknown>null);
+			expect(element.getAttribute('headers')).toBe('null');
 		});
 	});