From 403c966da0e54a5316ac25193f53ccdb6234f76e Mon Sep 17 00:00:00 2001
From: lidlanca <8693091+lidlanca@users.noreply.github.com>
Date: Mon, 21 Feb 2022 03:45:38 -0500
Subject: [PATCH 1/6] [fix] textContent should not be set for <template>
 element.

---
 src/compiler/compile/render_dom/wrappers/Element/index.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/compiler/compile/render_dom/wrappers/Element/index.ts b/src/compiler/compile/render_dom/wrappers/Element/index.ts
index eb57233ed0a..02bc2bf62e3 100644
--- a/src/compiler/compile/render_dom/wrappers/Element/index.ts
+++ b/src/compiler/compile/render_dom/wrappers/Element/index.ts
@@ -289,7 +289,10 @@ export default class ElementWrapper extends Wrapper {
 
 		// insert static children with textContent or innerHTML
 		const can_use_textcontent = this.can_use_textcontent();
-		if (!this.node.namespace && (this.can_use_innerhtml || can_use_textcontent) && this.fragment.nodes.length > 0) {
+		const isTemplate = this.node.name == 'template';
+		// skip textcontent logic for <template>. should append to the template .content 
+		const isTemplateWithTextContent = isTemplate && can_use_textcontent;
+		if (!isTemplateWithTextContent && !this.node.namespace && (this.can_use_innerhtml || can_use_textcontent) && this.fragment.nodes.length > 0) {
 			if (this.fragment.nodes.length === 1 && this.fragment.nodes[0].node.type === 'Text') {
 				block.chunks.create.push(
 					b`${node}.textContent = ${string_literal((this.fragment.nodes[0] as TextWrapper).data)};`

From 257732e2385a10ad2ab109e969dca27e2f816fa9 Mon Sep 17 00:00:00 2001
From: lidlanca <8693091+lidlanca@users.noreply.github.com>
Date: Mon, 21 Feb 2022 12:47:58 -0500
Subject: [PATCH 2/6] tidy - name convetion. minor refactor extract "is
 template" check to a variable and replace usages.

---
 .../compile/render_dom/wrappers/Element/index.ts      | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/compiler/compile/render_dom/wrappers/Element/index.ts b/src/compiler/compile/render_dom/wrappers/Element/index.ts
index 02bc2bf62e3..b0a418c83de 100644
--- a/src/compiler/compile/render_dom/wrappers/Element/index.ts
+++ b/src/compiler/compile/render_dom/wrappers/Element/index.ts
@@ -288,11 +288,12 @@ export default class ElementWrapper extends Wrapper {
 		}
 
 		// insert static children with textContent or innerHTML
+		// skip textcontent for <template>.  append nodes to TemplateElement.content instead
 		const can_use_textcontent = this.can_use_textcontent();
-		const isTemplate = this.node.name == 'template';
-		// skip textcontent logic for <template>. should append to the template .content 
-		const isTemplateWithTextContent = isTemplate && can_use_textcontent;
-		if (!isTemplateWithTextContent && !this.node.namespace && (this.can_use_innerhtml || can_use_textcontent) && this.fragment.nodes.length > 0) {
+		const is_template = this.node.name === 'template';
+		const is_template_with_text_content = is_template && can_use_textcontent;
+
+		if (!is_template_with_text_content && !this.node.namespace && (this.can_use_innerhtml || can_use_textcontent) && this.fragment.nodes.length > 0) {
 			if (this.fragment.nodes.length === 1 && this.fragment.nodes[0].node.type === 'Text') {
 				block.chunks.create.push(
 					b`${node}.textContent = ${string_literal((this.fragment.nodes[0] as TextWrapper).data)};`
@@ -323,7 +324,7 @@ export default class ElementWrapper extends Wrapper {
 			this.fragment.nodes.forEach((child: Wrapper) => {
 				child.render(
 					block,
-					this.node.name === 'template' ? x`${node}.content` : node,
+					is_template ? x`${node}.content` : node,
 					nodes
 				);
 			});

From babadec827d69964fdd6f79c8525d0c0275ff769 Mon Sep 17 00:00:00 2001
From: lidlanca <8693091+lidlanca@users.noreply.github.com>
Date: Sat, 26 Feb 2022 04:25:24 -0500
Subject: [PATCH 3/6] test template with text content

---
 test/runtime/samples/template/_config.js  | 17 ++++++++++++-----
 test/runtime/samples/template/main.svelte |  5 +++--
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/test/runtime/samples/template/_config.js b/test/runtime/samples/template/_config.js
index f5117d3808a..1565693e995 100644
--- a/test/runtime/samples/template/_config.js
+++ b/test/runtime/samples/template/_config.js
@@ -8,16 +8,23 @@ export default {
 	`,
 
 	test({ assert, target }) {
-		const template = target.querySelector('template');
-
+		
+		const template = target.querySelector('#t1');
 		assert.htmlEqual(template.innerHTML, `
-			<div>foo</div>
-		`);
-
+		<div>foo</div>
+   	    `);
 		const content = template.content.cloneNode(true);
 		const div = content.children[0];
 		assert.htmlEqual(div.outerHTML, `
 			<div>foo</div>
 		`);
+
+
+		const template2 = target.querySelector('#t2');
+		assert.equal(template2.childNodes.length, 0); 
+		assert.equal(template2.content.childNodes.length, 1);
+		assert.equal(template2.content.firstChild.textContent, '123');
+		assert.htmlEqual(template2.innerHTML, '123');
+
 	}
 };
diff --git a/test/runtime/samples/template/main.svelte b/test/runtime/samples/template/main.svelte
index e77230d0ccf..2e2f5b6c296 100644
--- a/test/runtime/samples/template/main.svelte
+++ b/test/runtime/samples/template/main.svelte
@@ -1,3 +1,4 @@
-<template>
+<template id="t1">
 	<div>foo</div>
-</template>
\ No newline at end of file
+</template>
+<template id="t2">123</template>
\ No newline at end of file

From f5eb70b7fc94cece180218c8051fb4cba270684b Mon Sep 17 00:00:00 2001
From: lidlanca <8693091+lidlanca@users.noreply.github.com>
Date: Sat, 26 Feb 2022 15:06:22 -0500
Subject: [PATCH 4/6] update html in test

---
 test/runtime/samples/template/_config.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/test/runtime/samples/template/_config.js b/test/runtime/samples/template/_config.js
index 1565693e995..6e92d771bd9 100644
--- a/test/runtime/samples/template/_config.js
+++ b/test/runtime/samples/template/_config.js
@@ -2,9 +2,10 @@ export default {
 	// solo: 1,
 
 	html: `
-		<template>
-			<div>foo</div>
-		</template>
+	<template id="t1">
+	    <div>foo</div>
+	</template>
+	<template id="t2">123</template>
 	`,
 
 	test({ assert, target }) {

From 33fbe4b1a51c24b3368c092ef8d08951ace79927 Mon Sep 17 00:00:00 2001
From: lidlanca <8693091+lidlanca@users.noreply.github.com>
Date: Sat, 12 Mar 2022 18:18:33 -0500
Subject: [PATCH 5/6] ensure innerHTML for tempalte is done on template
 element. depends on:#7297 fixes #7315 #7319

---
 src/runtime/internal/dom.ts               |  6 +++---
 test/runtime/samples/template/_config.js  | 12 ++++++++++++
 test/runtime/samples/template/main.svelte |  3 ++-
 3 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/runtime/internal/dom.ts b/src/runtime/internal/dom.ts
index 287c16b5fc5..417b697d221 100644
--- a/src/runtime/internal/dom.ts
+++ b/src/runtime/internal/dom.ts
@@ -650,7 +650,7 @@ export class HtmlTag {
 	// html tag nodes
 	n: ChildNode[];
 	// target
-	t: HTMLElement;
+	t: HTMLElement | DocumentFragment;
 	// anchor
 	a: HTMLElement;
 
@@ -665,7 +665,7 @@ export class HtmlTag {
 	m(html: string, target: HTMLElement, anchor: HTMLElement = null) {
 		if (!this.e) {
 			this.e = element(target.nodeName as keyof HTMLElementTagNameMap);
-			this.t = target;
+			this.t = target.tagName !== 'TEMPLATE' ? target : (target as HTMLTemplateElement).content;
 			this.c(html);
 		}
 
@@ -674,7 +674,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 6e92d771bd9..2a65b787165 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 2e2f5b6c296..1fb0d65f47a 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

From 9f368bc201fbb85e4c51df374913d33e9997e3d1 Mon Sep 17 00:00:00 2001
From: lidlanca <8693091+lidlanca@users.noreply.github.com>
Date: Sun, 17 Apr 2022 22:33:51 +0000
Subject: [PATCH 6/6] HtmlTag::m normalize the case target is a fragment of
 template

---
 src/runtime/internal/dom.ts               | 5 +++--
 test/runtime/samples/template/main.svelte | 2 +-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/runtime/internal/dom.ts b/src/runtime/internal/dom.ts
index eee5d574faa..a7418ab278b 100644
--- a/src/runtime/internal/dom.ts
+++ b/src/runtime/internal/dom.ts
@@ -664,7 +664,8 @@ export class HtmlTag {
 
 	m(html: string, target: HTMLElement, anchor: HTMLElement = null) {
 		if (!this.e) {
-			this.e = element(target.nodeName as keyof HTMLElementTagNameMap);
+			/** #7364  target for <template> may be provided as #document-fragment(11) */
+			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);
 		}
@@ -674,7 +675,7 @@ export class HtmlTag {
 
 	h(html: string) {
 		this.e.innerHTML = html;
-		this.n = Array.from(this.e.nodeName == 'TEMPLATE' ? (this.e as HTMLTemplateElement).content.childNodes : 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/main.svelte b/test/runtime/samples/template/main.svelte
index 502452250e2..1fb0d65f47a 100644
--- a/test/runtime/samples/template/main.svelte
+++ b/test/runtime/samples/template/main.svelte
@@ -2,4 +2,4 @@
 	<div>foo</div>
 </template>
 <template id="t2">123</template>
-<template id="t3">1{@html '<b>B</b>'}1</template>
+<template id="t3">1{@html '<b>B</b>'}1</template>
\ No newline at end of file