Skip to content

Commit 3e11b89

Browse files
rChaozRich-Harris
andauthored
docs: improve section for snippets-slots interop (#13869)
* docs: improve section for snippets-slots interop * tweak --------- Co-authored-by: Rich Harris <rich.harris@vercel.com>
1 parent d15aea4 commit 3e11b89

File tree

1 file changed

+25
-1
lines changed

1 file changed

+25
-1
lines changed

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

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -339,7 +339,31 @@ 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.
342+
They continue to work, however, and you can pass snippets to a component that uses slots:
343+
344+
```svelte
345+
<!--- file: Child.svelte --->
346+
<slot />
347+
<hr />
348+
<slot name="foo" message="hello" />
349+
```
350+
351+
```svelte
352+
<!--- file: Parent.svelte --->
353+
<script>
354+
import Child from './Child.svelte';
355+
</script>
356+
357+
<Child>
358+
default child content
359+
360+
{#snippet foo({ message })}
361+
message from child: {message}
362+
{/snippet}
363+
</Child>
364+
```
365+
366+
(The reverse is not true — you cannot pass slotted content to a component that uses [`{@render ...}`](/docs/svelte/@render) tags.)
343367

344368
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.
345369

0 commit comments

Comments
 (0)