From 348185794d48544e7efb982b3b4074d82e05b860 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 4 Dec 2024 07:07:25 -0500
Subject: [PATCH] docs: tweak slot docs (#14543)

---
 .../docs/99-legacy/20-legacy-slots.md         | 28 +++++++++++--------
 1 file changed, 17 insertions(+), 11 deletions(-)

diff --git a/documentation/docs/99-legacy/20-legacy-slots.md b/documentation/docs/99-legacy/20-legacy-slots.md
index 5189f2017d..3474782e93 100644
--- a/documentation/docs/99-legacy/20-legacy-slots.md
+++ b/documentation/docs/99-legacy/20-legacy-slots.md
@@ -74,39 +74,45 @@ If no slotted content is provided, a component can define fallback content by pu
 
 Slots can be rendered zero or more times and can pass values _back_ to the parent using props. The parent exposes the values to the slot template using the `let:` directive.
 
-The usual shorthand rules apply — `let:item` is equivalent to `let:item={item}`, and `<slot {item}>` is equivalent to `<slot item={item}>`.
-
 ```svelte
-<!-- FancyList.svelte -->
+<!--- file: FancyList.svelte --->
 <ul>
-	{#each items as item}
+	{#each items as data}
 		<li class="fancy">
-			<slot prop={item} />
+			<!-- 'item' here... -->
+			<slot item={process(data)} />
 		</li>
 	{/each}
 </ul>
+```
 
-<!-- App.svelte -->
-<FancyList {items} let:prop={thing}>
-	<div>{thing.text}</div>
+```svelte
+<!--- file: App.svelte --->
+<!-- ...corresponds to 'item' here: -->
+<FancyList {items} let:item={processed}>
+	<div>{processed.text}</div>
 </FancyList>
 ```
 
+The usual shorthand rules apply — `let:item` is equivalent to `let:item={item}`, and `<slot {item}>` is equivalent to `<slot item={item}>`.
+
 Named slots can also expose values. The `let:` directive goes on the element with the `slot` attribute.
 
 ```svelte
-<!-- FancyList.svelte -->
+<!--- file: FancyList.svelte --->
 <ul>
 	{#each items as item}
 		<li class="fancy">
-			<slot name="item" {item} />
+			<slot name="item" item={process(data)} />
 		</li>
 	{/each}
 </ul>
 
 <slot name="footer" />
+```
 
-<!-- App.svelte -->
+```svelte
+<!--- file: App.svelte --->
 <FancyList {items}>
 	<div slot="item" let:item>{item.text}</div>
 	<p slot="footer">Copyright (c) 2019 Svelte Industries</p>