From 32a29d9ee98169e1c0ef4a3b3f9e44f52ddf486a Mon Sep 17 00:00:00 2001
From: Bohdan Dukhevych <landenmetal@gmail.com>
Date: Wed, 16 Jul 2025 16:05:54 +0300
Subject: [PATCH] feat(runtime-browser): add support for <svelte:element
 this="contents"> to render children without wrapper

- Added handling in element block to treat "contents" as no-wrapper rendering
- Added runtime-browser test for this behavior
---
 .changeset/curvy-experts-join.md                     |  5 +++++
 .../src/internal/client/dom/blocks/svelte-element.js | 10 +++++++++-
 .../samples/svelte-element-contents/_config.js       | 12 ++++++++++++
 .../samples/svelte-element-contents/main.svelte      |  7 +++++++
 4 files changed, 33 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/curvy-experts-join.md
 create mode 100644 packages/svelte/tests/runtime-browser/samples/svelte-element-contents/_config.js
 create mode 100644 packages/svelte/tests/runtime-browser/samples/svelte-element-contents/main.svelte

diff --git a/.changeset/curvy-experts-join.md b/.changeset/curvy-experts-join.md
new file mode 100644
index 0000000000..56e8816a57
--- /dev/null
+++ b/.changeset/curvy-experts-join.md
@@ -0,0 +1,5 @@
+---
+'svelte': minor
+---
+
+Add support for `<svelte:element this="contents">` to render children without wrapper element
diff --git a/packages/svelte/src/internal/client/dom/blocks/svelte-element.js b/packages/svelte/src/internal/client/dom/blocks/svelte-element.js
index 231a3621b1..9634c5322e 100644
--- a/packages/svelte/src/internal/client/dom/blocks/svelte-element.js
+++ b/packages/svelte/src/internal/client/dom/blocks/svelte-element.js
@@ -96,7 +96,15 @@ export function element(node, get_tag, is_svg, render_fn, get_namespace, locatio
 			}
 		}
 
-		if (next_tag && next_tag !== current_tag) {
+		if (next_tag === 'contents') {
+			// Don't mount anything; just execute render_fn directly with anchor
+			effect = branch(() => {
+				if (render_fn) {
+					render_fn(anchor.parentNode, anchor);
+				}
+				/** @type {Effect} */ (active_effect).nodes_end = anchor;
+			});
+		} else if (next_tag && next_tag !== current_tag) {
 			effect = branch(() => {
 				element = hydrating
 					? /** @type {Element} */ (element)
diff --git a/packages/svelte/tests/runtime-browser/samples/svelte-element-contents/_config.js b/packages/svelte/tests/runtime-browser/samples/svelte-element-contents/_config.js
new file mode 100644
index 0000000000..b7e43f499f
--- /dev/null
+++ b/packages/svelte/tests/runtime-browser/samples/svelte-element-contents/_config.js
@@ -0,0 +1,12 @@
+import { test } from '../../assert';
+
+export default test({
+	mode: ['client'],
+	async test({ assert, window }) {
+		await new Promise((r) => setTimeout(r, 1000));
+		assert.htmlEqual(
+			window.document.body.innerHTML,
+			`<main><strong>Hello</strong></main>`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-browser/samples/svelte-element-contents/main.svelte b/packages/svelte/tests/runtime-browser/samples/svelte-element-contents/main.svelte
new file mode 100644
index 0000000000..1a75697ba1
--- /dev/null
+++ b/packages/svelte/tests/runtime-browser/samples/svelte-element-contents/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	let tag = 'contents';
+</script>
+
+<svelte:element this={tag}>
+	<strong>Hello</strong>
+</svelte:element>