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>
pull/8328/head
lidlanca 2 years ago committed by GitHub
parent dc7fd76e53
commit aa15a64cbe
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -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) {

@ -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');
}
};

@ -2,3 +2,4 @@
<div>foo</div>
</template>
<template id="t2">123</template>
<template id="t3">1{@html '<b>B</b>'}1</template>
Loading…
Cancel
Save