@ -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}>`.
The usual shorthand rules apply — `let:item` is equivalent to `let:item={item}`, and `<slot {item}>` is equivalent to `<slot item={item}>`.
```sv
```sv
<!-- FancyList.svelte -->
<!-- FancyList.svelte -->
<!-- This component passes data to its child slot using the `itemData` prop -->
<ul>
<ul>
{#each items as item}
{#each items as item}
<liclass="fancy">
<liclass="fancy">
<slotprop={item}></slot>
<slotitemData={item}></slot>
</li>
</li>
{/each}
{/each}
</ul>
</ul>
<!-- App.svelte -->
<!-- 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 -->