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 `` 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, + `
Hello
` + ); + } +}); 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 @@ + + + + Hello +