fix `{@html}` assuming it lives inside a <div> (#4863)

CHANGELOG.md

@@ -10,6 +10,7 @@
 * Add `muted` binding for media elements ([#2998](https://github.com/sveltejs/svelte/issues/2998))
 * Fix let-less `<slot>` 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

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.hydrate.push(b`${html_tag} = new @HtmlTag(${update_anchor});`);
-			block.chunks.mount.push(b`${html_tag}.m(${parent_node || '#target'}, ${parent_node ? null : '#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);

src/runtime/internal/dom.ts

@@ -319,29 +319,36 @@ export class HtmlTag {
 	t: HTMLElement;
 	a: HTMLElement;
 
-	constructor(html: string, anchor: HTMLElement = null) {
+	constructor(anchor: HTMLElement = null) {
-		this.e = element('div');
 		this.a = anchor;
-		this.u(html);
+		this.e = this.n = null;
 	}
 
-	m(target: HTMLElement, anchor: HTMLElement = null) {
+	m(html: string, target: HTMLElement, anchor: HTMLElement = null) {
-		for (let i = 0; i < this.n.length; i += 1) {
+		if (!this.e) {
-			insert(target, this.n[i], anchor);
+			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.h(html);
-		this.m(this.t, this.a);
+		this.i(this.a);
 	}
 
 	d() {

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);

test/runtime/samples/raw-mustaches-td-tr/_config.js

@@ -0,0 +1,18 @@
+export default {
+	props: {
+		raw: "<tr><td>1</td><td>2</td></tr>",
+	},
+
+	html: `
+		<table>
+			<tbody>
+				<tr>
+					<td>5</td><td>7</td>
+				</tr>
+				<tr>
+					<td>1</td><td>2</td>
+				</tr>
+			</tbody>
+		</table>
+	`,
+};

test/runtime/samples/raw-mustaches-td-tr/main.svelte

@@ -0,0 +1,12 @@
+<script>
+	export let raw;
+</script>
+
+<table>
+	<tbody>
+		<tr>
+			<td>5</td><td>7</td>
+		</tr>
+		{@html raw}
+	</tbody>
+</table>