Skip to content

Commit aa308dc

Browse files
committed
tweak
1 parent 89bd38d commit aa308dc

File tree

1 file changed

+16
-27
lines changed

1 file changed

+16
-27
lines changed

documentation/docs/07-misc/07-v5-migration-guide.md

Lines changed: 16 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -339,43 +339,32 @@ When spreading props, local event handlers must go _after_ the spread, or they r
339339

340340
In Svelte 4, content can be passed to components using slots. Svelte 5 replaces them with snippets which are more powerful and flexible, and as such slots are deprecated in Svelte 5.
341341

342-
They continue to work, however, and you can mix and match snippets and slots in your components:
343-
344-
```svelte
345-
<!-- Child.svelte -->
346-
<slot user="Mark" />
347-
<ul>
348-
{#each ["Buy groceries", "Walk the dog", "..."] as reminder}
349-
<slot name="item" title={reminder} />
350-
{/each}
351-
</ul>
352-
353-
<!-- Parent.svelte -->
354-
<Child ---let:user--->
355-
+++{#snippet children({ user })}+++
356-
Hi, {user}! Here are your reminders for today:
357-
+++{/snippet}+++
358-
---<svelte:fragment slot="item" let:title>---+++{#snippet item({ title })}+++
359-
<li>{title}</li>
360-
---</svelte:fragment>---+++{/snippet}+++
361-
</Child>
362-
```
342+
They continue to work, however, and you can pass snippets to a component that uses slots:
363343

364-
You cannot, however, use snippet-based components from legacy code (named slots, `let:` declarations), with the exception of the implicit children snippet:
344+
```svelte
345+
<!--- file: Child.svelte --->
346+
<slot />
347+
<hr />
348+
<slot name="foo" message="hello" />
349+
```
365350

366351
```svelte
367-
<!-- Child.svelte -->
352+
<!--- file: Parent.svelte --->
368353
<script>
369-
let { children } = $props()
354+
import Child from './Child.svelte';
370355
</script>
371-
{@render children?.()}
372356
373-
<!-- Parent.svelte -->
374357
<Child>
375-
Content is passed as a snippet using the 'children' prop, even in legacy components
358+
default child content
359+
360+
{#snippet foo({ message })}
361+
message from child: {message}
362+
{/snippet}
376363
</Child>
377364
```
378365

366+
(The reverse is not true — you cannot pass slotted content to a component that uses [`{@render ...}`](/docs/svelte/@render) tags.)
367+
379368
When using custom elements, you should still use `<slot />` like before. In a future version, when Svelte removes its internal version of slots, it will leave those slots as-is, i.e. output a regular DOM tag instead of transforming it.
380369

381370
### Default content

0 commit comments

Comments
 (0)