#451 fixes missing inner html in html template

[Mas0nShi]

Fixes #451

[Mas0nShi]

I can't find the better ways to process innerHTML, i overwrite innerHTML getter & setter , this doesn't seem like a good way to go, and if you have a better idea for solving this, reject it.

[capricorn86]

@Mas0nShi I don't have a better suggestion at the moment. Maybe we can improve this in the future by extracting setting and getting HTML to a utility.

We also need to sovle this for: get outerHTML(), set outerHTML() and getInnerHTML().

I also suggest that we replace get content() with just a property for performance.

I noticed that cloneNode() is wrong as well. It has to clone the content element.

My suggestion is to do this:

import Node from '../node/Node';
import HTMLElement from '../html-element/HTMLElement';
import IDocumentFragment from '../document-fragment/IDocumentFragment';
import INode from '../node/INode';
import IHTMLTemplateElement from './IHTMLTemplateElement';
import XMLParser from '../../xml-parser/XMLParser';
import XMLSerializer from '../../xml-serializer/XMLSerializer';
import DOMException from '../../exception/DOMException';

/**
 * HTML Template Element.
 *
 * Reference:
 * https://developer.mozilla.org/en-US/docs/Web/API/HTMLTemplateElement.
 */
export default class HTMLTemplateElement extends HTMLElement implements IHTMLTemplateElement {
	public readonly content: IDocumentFragment = this.ownerDocument.createDocumentFragment();

	/**
	 * @override
	 */
	public get innerHTML(): string {
		return this.getInnerHTML();
	}

	/**
	 * @override
	 */
	public set innerHTML(html: string) {
		for (const child of this.content.childNodes.slice()) {
			this.content.removeChild(child);
		}

		for (const node of XMLParser.parse(this.ownerDocument, html).childNodes.slice()) {
			this.content.appendChild(node);
		}
	}

	/**
	 * @override
	 */
	public get outerHTML(): string {
		return new XMLSerializer().serializeToString(this.content);
	}

	/**
	 * @override
	 */
	public set outerHTML(_html: string) {
		throw new DOMException(`Failed to set the 'outerHTML' property on 'Element': This element has no parent node.`);
	}

	/**
	 * @override
	 */
	public get previousSibling(): INode {
		return this.content.previousSibling;
	}

	/**
	 * @override
	 */
	public get nextSibling(): INode {
		return this.content.nextSibling;
	}

	/**
	 * @override
	 */
	public get firstChild(): INode {
		return this.content.firstChild;
	}

	/**
	 * @override
	 */
	public get lastChild(): INode {
		return this.content.lastChild;
	}

	/**
	 * @override
	 */
	public getInnerHTML(options?: { includeShadowRoots?: boolean }): string {
		const xmlSerializer = new XMLSerializer();
		let xml = '';
		for (const node of this.content.childNodes) {
			xml += xmlSerializer.serializeToString(node, options);
		}
		return xml;
	}

	/**
	 * @override
	 */
	public appendChild(node: INode): INode {
		return this.content.appendChild(node);
	}

	/**
	 * @override
	 */
	public removeChild(node: Node): INode {
		return this.content.removeChild(node);
	}

	/**
	 * @override
	 */
	public insertBefore(newNode: INode, referenceNode: INode): INode {
		return this.content.insertBefore(newNode, referenceNode);
	}

	/**
	 * @override
	 */
	public replaceChild(newChild: INode, oldChild: INode): INode {
		return this.content.replaceChild(newChild, oldChild);
	}

	/**
	 * @override
	 */
	public cloneNode(deep = false): IHTMLTemplateElement {
		const clone = <IHTMLTemplateElement>super.cloneNode(deep);
		(<IDocumentFragment>clone.content) = this.content.cloneNode(deep);
		return clone;
	}
}

[Mas0nShi]

changes HTMLTemplateElement.ts

[Mas0nShi]

replaceWith method is exists?

	/**
	 * @override
	 */
	public set outerHTML(html: string) {
		this.content.replaceWith(html);
	}

[Mas0nShi]

maybe you can create a new PR for yourself? I will close this half-fixes PR.

[capricorn86]

replaceWith method is exists?

	/**
	 * @override
	 */
	public set outerHTML(html: string) {
		this.content.replaceWith(html);
	}

Here it would be enough to throw an exception as it is not possible to set outerHTML.

 	/**
 	 * @override
 	 */
 	public set outerHTML(_html: string) {
 		throw new DOMException(`Failed to set the 'outerHTML' property on 'Element': This element has no parent node.`);
 	}
```;

[capricorn86]

@Mas0nShi I have updated my code example

[Mas0nShi]

@Mas0nShi I have updated my code example

copy that

[Mas0nShi]

Note
done. We may need more test units now.

[capricorn86]

Good job! I will add some more unit tests 👍