innerHTML broken for template elements

Test case:

const t = document.createElement('template');
t.innerHTML = '<div>happy-dom is cool!</div>';
console.log(JSON.stringify(t.innerHTML));

Output in

• Chrome: "<div>happy-dom is cool!</div>"
• jsdom: "<div>happy-dom is cool!</div>"
• linkedom: "<div>happy-dom is cool!</div>"
• happy-dom: ""

Expectation

happy-dom should behave like every other tested DOM.

Motivation

This breaks the integration into solid-register, which uses a dom on top of node to test solid code fast.

[Mas0nShi]

get innerHTML from this.childNodes in the Element.ts

https://github.com/capricorn86/happy-dom/blob/faaaa2c90b923a20ccfce1af7e0a514e3d13357b/packages/happy-dom/src/nodes/element/Element.ts#L170-L177

but the div element not in this.childNodes. it’s in this.content.childNodes.

https://github.com/capricorn86/happy-dom/blob/faaaa2c90b923a20ccfce1af7e0a514e3d13357b/packages/happy-dom/src/nodes/html-template-element/HTMLTemplateElement.ts#L21-L26

so we should overwrite innerHTML like this(maybe error for my understand to sources code):

add code in HTMLTemplateElement.ts

	/**
	 * Returns inner HTML.
	 *
	 * @returns HTML.
	 */
	public get innerHTML(): string {
		const xmlSerializer = new XMLSerializer();
		let xml = '';
		for (const node of this.content.childNodes) {
			xml += xmlSerializer.serializeToString(node);
		}
		return xml;
	}
	/**
	 * Sets inner HTML.
	 *
	 * @param html HTML.
	 */
	public set innerHTML(html: string) {
		super.innerHTML = html;
	}

@capricorn86 Is this a good answer?

[capricorn86]

We finally have a fix in place that should resolve the remaining issues related to the HTMLTemplateElement 🙂

You can read more about the release here: https://github.com/capricorn86/happy-dom/releases/tag/v6.0.0