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

@@ -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}>
+<FancyList {items} let:prop={thing}>
-	<div>{item.text}</div>
+	<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>