From fb341cca2c0b5706bb1402dbafdf2c67ca882509 Mon Sep 17 00:00:00 2001
From: lidlanca <8693091+lidlanca@users.noreply.github.com>
Date: Fri, 15 Apr 2022 22:24:59 -0400
Subject: [PATCH] [fix] textContent should not be set for <template> element.
 (#7297)

* [fix] textContent should not be set for <template> element.

* tidy - name convetion. minor refactor extract "is template" check to a variable and replace usages.

* test template with text content

* update html in test
---
 .../render_dom/wrappers/Element/index.ts      |  8 +++++--
 test/runtime/samples/template/_config.js      | 24 ++++++++++++-------
 test/runtime/samples/template/main.svelte     |  5 ++--
 3 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/src/compiler/compile/render_dom/wrappers/Element/index.ts b/src/compiler/compile/render_dom/wrappers/Element/index.ts
index e50f0c45e1a..5145db9fef9 100644
--- a/src/compiler/compile/render_dom/wrappers/Element/index.ts
+++ b/src/compiler/compile/render_dom/wrappers/Element/index.ts
@@ -420,8 +420,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();
-		if (!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)};`
@@ -452,7 +456,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
 				);
 			});
diff --git a/test/runtime/samples/template/_config.js b/test/runtime/samples/template/_config.js
index f5117d3808a..6e92d771bd9 100644
--- a/test/runtime/samples/template/_config.js
+++ b/test/runtime/samples/template/_config.js
@@ -2,22 +2,30 @@ 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 }) {
-		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