From aa15a64cbefff009073fc298b5df679bf385f9c8 Mon Sep 17 00:00:00 2001
From: lidlanca <8693091+lidlanca@users.noreply.github.com>
Date: Tue, 28 Feb 2023 12:16:55 -0500
Subject: [PATCH] fix: account for `<template>` tag in `{@html}` (#7364)

Ensure innerHTML for template is done on template element
fixes #7315
fixes #7319

---------

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
---
 src/runtime/internal/dom.ts               |  9 +++++----
 test/runtime/samples/template/_config.js  | 12 ++++++++++++
 test/runtime/samples/template/main.svelte |  3 ++-
 3 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/runtime/internal/dom.ts b/src/runtime/internal/dom.ts
index e40df19c38..1f87e91910 100644
--- a/src/runtime/internal/dom.ts
+++ b/src/runtime/internal/dom.ts
@@ -698,7 +698,7 @@ export class HtmlTag {
 	// html tag nodes
 	n: ChildNode[];
 	// target
-	t: HTMLElement | SVGElement;
+	t: HTMLElement | SVGElement | DocumentFragment;
 	// anchor
 	a: HTMLElement | SVGElement;
 
@@ -718,8 +718,9 @@ export class HtmlTag {
 	) {
 		if (!this.e) {
 			if (this.is_svg) this.e = svg_element(target.nodeName as keyof SVGElementTagNameMap);
-			else this.e = element(target.nodeName as keyof HTMLElementTagNameMap);
-			this.t = target;
+			/** #7364  target for <template> may be provided as #document-fragment(11) */
+			else this.e = element((target.nodeType === 11 ? 'TEMPLATE' :  target.nodeName) as keyof HTMLElementTagNameMap);
+			this.t = target.tagName !== 'TEMPLATE' ? target : (target as HTMLTemplateElement).content;
 			this.c(html);
 		}
 
@@ -728,7 +729,7 @@ export class HtmlTag {
 
 	h(html: string) {
 		this.e.innerHTML = html;
-		this.n = Array.from(this.e.childNodes);
+		this.n = Array.from(this.e.nodeName === 'TEMPLATE' ? (this.e as HTMLTemplateElement).content.childNodes : this.e.childNodes);
 	}
 
 	i(anchor) {
diff --git a/test/runtime/samples/template/_config.js b/test/runtime/samples/template/_config.js
index 6e92d771bd..2a65b78716 100644
--- a/test/runtime/samples/template/_config.js
+++ b/test/runtime/samples/template/_config.js
@@ -6,6 +6,7 @@ export default {
 	    <div>foo</div>
 	</template>
 	<template id="t2">123</template>
+	<template id="t3">1<b>B</b>1</template>
 	`,
 
 	test({ assert, target }) {
@@ -27,5 +28,16 @@ export default {
 		assert.equal(template2.content.firstChild.textContent, '123');
 		assert.htmlEqual(template2.innerHTML, '123');
 
+		const template3 = target.querySelector('#t3');
+		assert.equal(template3.childNodes.length, 0); 
+		assert.equal(template3.content.childNodes.length, 3);
+		// test: (with hydration from ssr rendered html)
+		// out of order render.
+		// <template>1{@html '2'}3</template>  may render as <template>321</template> for ssr+hydration case.
+		// we bypass it by using symmetric siblings. hence <template> is not fully stable for this edge case.
+		assert.equal(template3.content.childNodes[0].textContent, '1');
+		assert.equal(template3.content.childNodes[1].outerHTML, '<b>B</b>');
+		assert.equal(template3.content.childNodes[2].textContent, '1');
+
 	}
 };
diff --git a/test/runtime/samples/template/main.svelte b/test/runtime/samples/template/main.svelte
index 2e2f5b6c29..1fb0d65f47 100644
--- a/test/runtime/samples/template/main.svelte
+++ b/test/runtime/samples/template/main.svelte
@@ -1,4 +1,5 @@
 <template id="t1">
 	<div>foo</div>
 </template>
-<template id="t2">123</template>
\ No newline at end of file
+<template id="t2">123</template>
+<template id="t3">1{@html '<b>B</b>'}1</template>
\ No newline at end of file