You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: documentation/docs/07-misc/07-v5-migration-guide.md
+16-27Lines changed: 16 additions & 27 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -339,43 +339,32 @@ When spreading props, local event handlers must go _after_ the spread, or they r
339
339
340
340
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.
341
341
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:
363
343
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
+
```
365
350
366
351
```svelte
367
-
<!-- Child.svelte -->
352
+
<!--- file: Parent.svelte --->
368
353
<script>
369
-
let { children } = $props()
354
+
import Child from './Child.svelte';
370
355
</script>
371
-
{@render children?.()}
372
356
373
-
<!-- Parent.svelte -->
374
357
<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}
376
363
</Child>
377
364
```
378
365
366
+
(The reverse is not true — you cannot pass slotted content to a component that uses [`{@render ...}`](/docs/svelte/@render) tags.)
367
+
379
368
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.
0 commit comments