Skip to content

Commit 32a29d9

Browse files
committed
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
1 parent e01bd97 commit 32a29d9

File tree

4 files changed

+33
-1
lines changed

4 files changed

+33
-1
lines changed

.changeset/curvy-experts-join.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'svelte': minor
3+
---
4+
5+
Add support for `<svelte:element this="contents">` to render children without wrapper element

packages/svelte/src/internal/client/dom/blocks/svelte-element.js

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,15 @@ export function element(node, get_tag, is_svg, render_fn, get_namespace, locatio
9696
}
9797
}
9898

99-
if (next_tag && next_tag !== current_tag) {
99+
if (next_tag === 'contents') {
100+
// Don't mount anything; just execute render_fn directly with anchor
101+
effect = branch(() => {
102+
if (render_fn) {
103+
render_fn(anchor.parentNode, anchor);
104+
}
105+
/** @type {Effect} */ (active_effect).nodes_end = anchor;
106+
});
107+
} else if (next_tag && next_tag !== current_tag) {
100108
effect = branch(() => {
101109
element = hydrating
102110
? /** @type {Element} */ (element)
Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { test } from '../../assert';
2+
3+
export default test({
4+
mode: ['client'],
5+
async test({ assert, window }) {
6+
await new Promise((r) => setTimeout(r, 1000));
7+
assert.htmlEqual(
8+
window.document.body.innerHTML,
9+
`<main><strong>Hello</strong></main>`
10+
);
11+
}
12+
});
Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<script>
2+
let tag = 'contents';
3+
</script>
4+
5+
<svelte:element this={tag}>
6+
<strong>Hello</strong>
7+
</svelte:element>

0 commit comments

Comments
 (0)