innerHTML broken for template elements

[atk]

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

happy-dom/packages/happy-dom/src/nodes/element/Element.ts

Lines 170 to 177 in faaaa2c

	public get innerHTML(): string {
	const xmlSerializer = new XMLSerializer();
	let xml = '';
	for (const node of this.childNodes) {
	xml += xmlSerializer.serializeToString(node);
	}
	return xml;
	}

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

happy-dom/packages/happy-dom/src/nodes/html-template-element/HTMLTemplateElement.ts

Lines 21 to 26 in faaaa2c

	public get content(): IDocumentFragment {
	if (!this._contentElement) {
	this._contentElement = this.ownerDocument.createDocumentFragment();
	}
	return this._contentElement;
	}

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?

[atk]

Thanks. I'll monkey-patch that fix if I detect it to be necessary in my project. Also thanks for maintaining this awesome project! If you want you can close this.

[capricorn86]

Thanks to @Mas0nShi we now have support for HTMLTemplateElement.innerHTML 🙂

I will add some additional unit tests as well in a separate PR.

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

[capricorn86]

Now when I'm writing more unit tests I have realized that the logic is not complete. outerHTML does not fully work and innerHTML does not work correctly when called in parent elements.

I will re-open this ticket.

[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