From 4c630e4ffcdf4fecd64468595415746a82a1b5e3 Mon Sep 17 00:00:00 2001
From: Matthew Dempsky <matthew@dempsky.org>
Date: Tue, 17 Dec 2019 17:55:00 -0800
Subject: [PATCH] site: clearer examples for <slot let:name>

In the first example, "item" is used to describe three logically
distinct objects: (1) the name of the slot's property; (2) the JS
variable used within FancyList.svelte's {#each} block; and (3) the JS
variable used within App.svelte. To make it clearer that these are
three different objects, give them different names.

The second example can continue reusing the same name for all of the
objects to demonstrate there's no collision between them. But we can
also simplify the example to take further advantage of shorthand
rules.
---
 site/content/docs/02-template-syntax.md | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/site/content/docs/02-template-syntax.md b/site/content/docs/02-template-syntax.md
index 89506753d6..f6a9954cdb 100644
--- a/site/content/docs/02-template-syntax.md
+++ b/site/content/docs/02-template-syntax.md
@@ -1245,15 +1245,15 @@ The usual shorthand rules apply — `let:item` is equivalent to `let:item={item}
 
 ```html
 <!-- App.svelte -->
-<FancyList {items} let:item={item}>
-	<div>{item.text}</div>
+<FancyList {items} let:prop={thing}>
+	<div>{thing.text}</div>
 </FancyList>
 
 <!-- FancyList.svelte -->
 <ul>
 	{#each items as item}
 		<li class="fancy">
-			<slot item={item}></slot>
+			<slot prop={item}></slot>
 		</li>
 	{/each}
 </ul>
@@ -1266,7 +1266,7 @@ Named slots can also expose values. The `let:` directive goes on the element wit
 ```html
 <!-- App.svelte -->
 <FancyList {items}>
-	<div slot="item" let:item={item}>{item.text}</div>
+	<div slot="item" let:item>{item.text}</div>
 	<p slot="footer">Copyright (c) 2019 Svelte Industries</p>
 </FancyList>
 
@@ -1274,7 +1274,7 @@ Named slots can also expose values. The `let:` directive goes on the element wit
 <ul>
 	{#each items as item}
 		<li class="fancy">
-			<slot name="item" item={item}></slot>
+			<slot name="item" {item}></slot>
 		</li>
 	{/each}
 </ul>