From 3e866573e8f7fdbc20edfcbfb0c79a4e0b0009b9 Mon Sep 17 00:00:00 2001
From: James Scott-Brown <james@jamesscottbrown.com>
Date: Wed, 12 Apr 2023 16:51:57 +0100
Subject: [PATCH 1/4] clarify let: directives

---
 site/content/docs/03-template-syntax.md | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/site/content/docs/03-template-syntax.md b/site/content/docs/03-template-syntax.md
index 170c303b8524..b5e1f7208739 100644
--- a/site/content/docs/03-template-syntax.md
+++ b/site/content/docs/03-template-syntax.md
@@ -1600,22 +1600,26 @@ Note that explicitly passing in an empty named slot will add that slot's name to
 
 ---
 
-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.
+Slots can be rendered zero or more times.
 
+The `let:` directive gives a slot template access to variables defined in the component that uses them.
 The usual shorthand rules apply — `let:item` is equivalent to `let:item={item}`, and `<slot {item}>` is equivalent to `<slot item={item}>`.
 
 ```sv
 <!-- FancyList.svelte -->
+<!-- This component passes data to its child slot using the `itemData` prop -->
 <ul>
 	{#each items as item}
 		<li class="fancy">
-			<slot prop={item}></slot>
+			<slot itemData={item}></slot>
 		</li>
 	{/each}
 </ul>
 
 <!-- App.svelte -->
-<FancyList {items} let:prop={thing}>
+<!-- the `let:itemData={thing}` directive makes the value that `FancyList` pases as the `itemData` prop
+     available to the slot template as the `thing` variable -->
+<FancyList {items} let:itemData={thing}>
 	<div>{thing.text}</div>
 </FancyList>
 ```

From dd5d96c07fd0e8247859395e0c249cfde402cc91 Mon Sep 17 00:00:00 2001
From: James Scott-Brown <james@jamesscottbrown.com>
Date: Wed, 12 Apr 2023 17:14:37 +0100
Subject: [PATCH 2/4] minor edits

---
 site/content/docs/03-template-syntax.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/site/content/docs/03-template-syntax.md b/site/content/docs/03-template-syntax.md
index b5e1f7208739..bb2ea35ed37a 100644
--- a/site/content/docs/03-template-syntax.md
+++ b/site/content/docs/03-template-syntax.md
@@ -1602,7 +1602,7 @@ Note that explicitly passing in an empty named slot will add that slot's name to
 
 Slots can be rendered zero or more times.
 
-The `let:` directive gives a slot template access to variables defined in the component that uses them.
+The `let:` directive gives a slot template access to variables defined in the component that they are provided to.
 The usual shorthand rules apply — `let:item` is equivalent to `let:item={item}`, and `<slot {item}>` is equivalent to `<slot item={item}>`.
 
 ```sv
@@ -1618,7 +1618,7 @@ The usual shorthand rules apply — `let:item` is equivalent to `let:item={item}
 
 <!-- App.svelte -->
 <!-- the `let:itemData={thing}` directive makes the value that `FancyList` pases as the `itemData` prop
-     available to the slot template as the `thing` variable -->
+     available to the slot template as a variable called `thing` -->
 <FancyList {items} let:itemData={thing}>
 	<div>{thing.text}</div>
 </FancyList>

From d1b779f9c70c888ebfaeeabf6a3af4c7119c63a2 Mon Sep 17 00:00:00 2001
From: James Scott-Brown <james@jamesscottbrown.com>
Date: Wed, 12 Apr 2023 18:17:54 +0100
Subject: [PATCH 3/4] Update site/content/docs/03-template-syntax.md

Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com>
---
 site/content/docs/03-template-syntax.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/content/docs/03-template-syntax.md b/site/content/docs/03-template-syntax.md
index bb2ea35ed37a..485b6602ed2c 100644
--- a/site/content/docs/03-template-syntax.md
+++ b/site/content/docs/03-template-syntax.md
@@ -1617,7 +1617,7 @@ The usual shorthand rules apply — `let:item` is equivalent to `let:item={item}
 </ul>
 
 <!-- App.svelte -->
-<!-- the `let:itemData={thing}` directive makes the value that `FancyList` pases as the `itemData` prop
+<!-- the `let:itemData={thing}` directive makes the value that `FancyList` passes as the `itemData` prop
      available to the slot template as a variable called `thing` -->
 <FancyList {items} let:itemData={thing}>
 	<div>{thing.text}</div>

From c360a6fe75f1532f30780ccda7cea0c30e844132 Mon Sep 17 00:00:00 2001
From: James Scott-Brown <james@jamesscottbrown.com>
Date: Mon, 17 Apr 2023 09:07:03 +0100
Subject: [PATCH 4/4] Update site/content/docs/03-template-syntax.md

Co-authored-by: gtmnayan <50981692+gtm-nayan@users.noreply.github.com>
---
 site/content/docs/03-template-syntax.md | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/site/content/docs/03-template-syntax.md b/site/content/docs/03-template-syntax.md
index 485b6602ed2c..17e319d8a42f 100644
--- a/site/content/docs/03-template-syntax.md
+++ b/site/content/docs/03-template-syntax.md
@@ -1617,8 +1617,12 @@ The usual shorthand rules apply — `let:item` is equivalent to `let:item={item}
 </ul>
 
 <!-- App.svelte -->
-<!-- the `let:itemData={thing}` directive makes the value that `FancyList` passes as the `itemData` prop
-     available to the slot template as a variable called `thing` -->
+<!-- `itemData` can now be used in the content you pass into the slot using `let:itemData` -->
+<FancyList {items} let:itemData>
+	<div>{itemData.text}</div>
+</FancyList>
+
+<!-- You can also rename it using the `let:itemData={thing}` syntax. -->
 <FancyList {items} let:itemData={thing}>
 	<div>{thing.text}</div>
 </FancyList>