From 8f245523dd5d046b3e6d4230313e64fa17f014fd Mon Sep 17 00:00:00 2001
From: Matei Trandafir <catalin_trand2@yahoo.com>
Date: Thu, 24 Oct 2024 15:19:31 +0300
Subject: [PATCH 1/2] docs: improve section for snippets-slots interop

---
 .../docs/07-misc/07-v5-migration-guide.md     | 37 ++++++++++++++++++-
 1 file changed, 36 insertions(+), 1 deletion(-)

diff --git a/documentation/docs/07-misc/07-v5-migration-guide.md b/documentation/docs/07-misc/07-v5-migration-guide.md
index deffca288d03..a3d2197c6215 100644
--- a/documentation/docs/07-misc/07-v5-migration-guide.md
+++ b/documentation/docs/07-misc/07-v5-migration-guide.md
@@ -339,7 +339,42 @@ When spreading props, local event handlers must go _after_ the spread, or they r
 
 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.
 
-They continue to work, however, and you can mix and match snippets and slots in your components.
+They continue to work, however, and you can mix and match snippets and slots in your components:
+
+```svelte
+<!-- Child.svelte -->
+<slot user="Mark" />
+<ul>
+  {#each ["Buy groceries", "Walk the dog", "..."] as reminder}
+    <slot name="item" title={reminder} />
+  {/each}
+</ul>
+
+<!-- Parent.svelte -->
+<Child ---let:user--->
+	+++{#snippet children({ user })}+++
+  Hi, {user}! Here are your reminders for today:
+  +++{/snippet}+++
+	---<svelte:fragment slot="item" let:title>---+++{#snippet item({ title })}+++
+    <li>{title}</li>
+	---</svelte:fragment>---+++{/snippet}+++
+</Child>
+```
+
+You cannot, however, use snippet-based components from legacy code (named slots, `let:` declarations), with the exception of the implicit children snippet:
+
+```svelte
+<!-- Child.svelte -->
+<script>
+  let { children } = $props()
+</script>
+{@render children?.()}
+
+<!-- Parent.svelte -->
+<Child>
+  Content is passed as a snippet using the 'children' prop, even in legacy components
+</Child>
+```
 
 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.
 

From aa308dc870e333b0ac2e57d530e2540c5bc9f188 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 8 Jan 2025 15:50:32 -0500
Subject: [PATCH 2/2] tweak

---
 .../docs/07-misc/07-v5-migration-guide.md     | 43 +++++++------------
 1 file changed, 16 insertions(+), 27 deletions(-)

diff --git a/documentation/docs/07-misc/07-v5-migration-guide.md b/documentation/docs/07-misc/07-v5-migration-guide.md
index 61037014adc3..901191375673 100644
--- a/documentation/docs/07-misc/07-v5-migration-guide.md
+++ b/documentation/docs/07-misc/07-v5-migration-guide.md
@@ -339,43 +339,32 @@ When spreading props, local event handlers must go _after_ the spread, or they r
 
 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.
 
-They continue to work, however, and you can mix and match snippets and slots in your components:
-
-```svelte
-<!-- Child.svelte -->
-<slot user="Mark" />
-<ul>
-  {#each ["Buy groceries", "Walk the dog", "..."] as reminder}
-    <slot name="item" title={reminder} />
-  {/each}
-</ul>
-
-<!-- Parent.svelte -->
-<Child ---let:user--->
-	+++{#snippet children({ user })}+++
-  Hi, {user}! Here are your reminders for today:
-  +++{/snippet}+++
-	---<svelte:fragment slot="item" let:title>---+++{#snippet item({ title })}+++
-    <li>{title}</li>
-	---</svelte:fragment>---+++{/snippet}+++
-</Child>
-```
+They continue to work, however, and you can pass snippets to a component that uses slots:
 
-You cannot, however, use snippet-based components from legacy code (named slots, `let:` declarations), with the exception of the implicit children snippet:
+```svelte
+<!--- file: Child.svelte --->
+<slot />
+<hr />
+<slot name="foo" message="hello" />
+```
 
 ```svelte
-<!-- Child.svelte -->
+<!--- file: Parent.svelte --->
 <script>
-  let { children } = $props()
+	import Child from './Child.svelte';
 </script>
-{@render children?.()}
 
-<!-- Parent.svelte -->
 <Child>
-  Content is passed as a snippet using the 'children' prop, even in legacy components
+	default child content
+
+	{#snippet foo({ message })}
+		message from child: {message}
+	{/snippet}
 </Child>
 ```
 
+(The reverse is not true — you cannot pass slotted content to a component that uses [`{@render ...}`](/docs/svelte/@render) tags.)
+
 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.
 
 ### Default content