diff --git a/CHANGELOG.md b/CHANGELOG.md index 9f5ae90395..a5c7c19a88 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,7 @@ * Add `muted` binding for media elements ([#2998](https://github.com/sveltejs/svelte/issues/2998)) * Fix let-less `` with context overflow ([#4624](https://github.com/sveltejs/svelte/issues/4624)) * Fix `use:` actions being recreated when a keyed `{#each}` is reordered ([#4693](https://github.com/sveltejs/svelte/issues/4693)) +* Fix `{@html}` when using tags that can only appear inside certain tags ([#4852](https://github.com/sveltejs/svelte/issues/4852)) * Fix reactivity when binding directly to `{#each}` context ([#4879](https://github.com/sveltejs/svelte/issues/4879)) ## 3.22.3 diff --git a/src/compiler/compile/render_dom/wrappers/RawMustacheTag.ts b/src/compiler/compile/render_dom/wrappers/RawMustacheTag.ts index 63889dd829..1e6213cf02 100644 --- a/src/compiler/compile/render_dom/wrappers/RawMustacheTag.ts +++ b/src/compiler/compile/render_dom/wrappers/RawMustacheTag.ts @@ -53,8 +53,8 @@ export default class RawMustacheTagWrapper extends Tag { const update_anchor = in_head ? 'null' : needs_anchor ? html_anchor : this.next ? this.next.var : 'null'; - block.chunks.hydrate.push(b`${html_tag} = new @HtmlTag(${init}, ${update_anchor});`); - block.chunks.mount.push(b`${html_tag}.m(${parent_node || '#target'}, ${parent_node ? null : '#anchor'});`); + block.chunks.hydrate.push(b`${html_tag} = new @HtmlTag(${update_anchor});`); + block.chunks.mount.push(b`${html_tag}.m(${init}, ${parent_node || '#target'}, ${parent_node ? null : '#anchor'});`); if (needs_anchor) { block.add_element(html_anchor, x`@empty()`, x`@empty()`, parent_node); diff --git a/src/runtime/internal/dom.ts b/src/runtime/internal/dom.ts index 02fd3dc23e..f67fd13b2d 100644 --- a/src/runtime/internal/dom.ts +++ b/src/runtime/internal/dom.ts @@ -294,7 +294,7 @@ export function add_resize_listener(node: HTMLElement, fn: () => void) { } else if (unsubscribe && iframe.contentWindow) { unsubscribe(); } - + detach(iframe); }; } @@ -319,29 +319,36 @@ export class HtmlTag { t: HTMLElement; a: HTMLElement; - constructor(html: string, anchor: HTMLElement = null) { - this.e = element('div'); + constructor(anchor: HTMLElement = null) { this.a = anchor; - this.u(html); + this.e = this.n = null; } - m(target: HTMLElement, anchor: HTMLElement = null) { - for (let i = 0; i < this.n.length; i += 1) { - insert(target, this.n[i], anchor); + m(html: string, target: HTMLElement, anchor: HTMLElement = null) { + if (!this.e) { + this.e = element(target.nodeName as keyof HTMLElementTagNameMap); + this.t = target; + this.h(html); } - this.t = target; + this.i(anchor); } - u(html: string) { + h(html) { this.e.innerHTML = html; this.n = Array.from(this.e.childNodes); } + i(anchor) { + for (let i = 0; i < this.n.length; i += 1) { + insert(this.t, this.n[i], anchor); + } + } + p(html: string) { this.d(); - this.u(html); - this.m(this.t, this.a); + this.h(html); + this.i(this.a); } d() { diff --git a/test/js/samples/each-block-changed-check/expected.js b/test/js/samples/each-block-changed-check/expected.js index 5d88032b87..f4f9df0de9 100644 --- a/test/js/samples/each-block-changed-check/expected.js +++ b/test/js/samples/each-block-changed-check/expected.js @@ -53,7 +53,7 @@ function create_each_block(ctx) { t5 = text(" ago:"); t6 = space(); attr(span, "class", "meta"); - html_tag = new HtmlTag(raw_value, null); + html_tag = new HtmlTag(null); attr(div, "class", "comment"); }, m(target, anchor) { @@ -67,7 +67,7 @@ function create_each_block(ctx) { append(span, t4); append(span, t5); append(div, t6); - html_tag.m(div); + html_tag.m(raw_value, div); }, p(ctx, dirty) { if (dirty & /*comments*/ 1 && t2_value !== (t2_value = /*comment*/ ctx[4].author + "")) set_data(t2, t2_value); diff --git a/test/runtime/samples/raw-mustaches-td-tr/_config.js b/test/runtime/samples/raw-mustaches-td-tr/_config.js new file mode 100644 index 0000000000..dfcb1ce0f0 --- /dev/null +++ b/test/runtime/samples/raw-mustaches-td-tr/_config.js @@ -0,0 +1,18 @@ +export default { + props: { + raw: "12", + }, + + html: ` + + + + + + + + + +
57
12
+ `, +}; diff --git a/test/runtime/samples/raw-mustaches-td-tr/main.svelte b/test/runtime/samples/raw-mustaches-td-tr/main.svelte new file mode 100644 index 0000000000..07d7299e43 --- /dev/null +++ b/test/runtime/samples/raw-mustaches-td-tr/main.svelte @@ -0,0 +1,12 @@ + + + + + + + + {@html raw} + +
57
\ No newline at end of file