diff --git a/src/runtime/internal/dom.ts b/src/runtime/internal/dom.ts
index e40df19c3869..1f87e919105e 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 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 6e92d771bd93..2a65b7871656 100644
--- a/test/runtime/samples/template/_config.js
+++ b/test/runtime/samples/template/_config.js
@@ -6,6 +6,7 @@ export default {
foo
123
+ 1B1
`,
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.
+ // 1{@html '2'}3 may render as 321 for ssr+hydration case.
+ // we bypass it by using symmetric siblings. hence is not fully stable for this edge case.
+ assert.equal(template3.content.childNodes[0].textContent, '1');
+ assert.equal(template3.content.childNodes[1].outerHTML, '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 2e2f5b6c296f..1fb0d65f47a5 100644
--- a/test/runtime/samples/template/main.svelte
+++ b/test/runtime/samples/template/main.svelte
@@ -1,4 +1,5 @@
foo
-123
\ No newline at end of file
+123
+1{@html 'B'}1
\ No newline at end of file