slot props chapter

site/content/tutorial/14-composition/04-slot-props/app-a/App.svelte

@@ -0,0 +1,26 @@
+<script>
+	import Hoverable from './Hoverable.svelte';
+</script>
+
+<style>
+	div {
+		padding: 1em;
+		margin: 0 0 1em 0;
+		background-color: #eee;
+	}
+
+	.active {
+		background-color: #ff3e00;
+		color: white;
+	}
+</style>
+
+<Hoverable>
+	<div class:active={hovering}>
+		{#if hovering}
+			<p>I am being hovered upon.</p>
+		{:else}
+			<p>Hover over me!</p>
+		{/if}
+	</div>
+</Hoverable>

site/content/tutorial/14-composition/04-slot-props/app-a/Hoverable.svelte

@@ -0,0 +1,15 @@
+<script>
+	let hovering;
+
+	function enter() {
+		hovering = true;
+	}
+
+	function leave() {
+		hovering = false;
+	}
+</script>
+
+<div on:mouseenter={enter} on:mouseleave={leave}>
+	<slot></slot>
+</div>

site/content/tutorial/14-composition/04-slot-props/app-b/App.svelte

@@ -0,0 +1,46 @@
+<script>
+	import Hoverable from './Hoverable.svelte';
+</script>
+
+<style>
+	div {
+		padding: 1em;
+		margin: 0 0 1em 0;
+		background-color: #eee;
+	}
+
+	.active {
+		background-color: #ff3e00;
+		color: white;
+	}
+</style>
+
+<Hoverable let:hovering={active}>
+	<div class:active>
+		{#if active}
+			<p>I am being hovered upon.</p>
+		{:else}
+			<p>Hover over me!</p>
+		{/if}
+	</div>
+</Hoverable>
+
+<Hoverable let:hovering={active}>
+	<div class:active>
+		{#if active}
+			<p>I am being hovered upon.</p>
+		{:else}
+			<p>Hover over me!</p>
+		{/if}
+	</div>
+</Hoverable>
+
+<Hoverable let:hovering={active}>
+	<div class:active>
+		{#if active}
+			<p>I am being hovered upon.</p>
+		{:else}
+			<p>Hover over me!</p>
+		{/if}
+	</div>
+</Hoverable>

site/content/tutorial/14-composition/04-slot-props/app-b/Hoverable.svelte

@@ -0,0 +1,15 @@
+<script>
+	let hovering;
+
+	function enter() {
+		hovering = true;
+	}
+
+	function leave() {
+		hovering = false;
+	}
+</script>
+
+<div on:mouseenter={enter} on:mouseleave={leave}>
+	<slot hovering={hovering}></slot>
+</div>

site/content/tutorial/14-composition/04-slot-props/text.md

@@ -0,0 +1,47 @@
+---
+title: Slot props
+---
+
+In this app, we have a `<Hoverable>` component that tracks whether the mouse is currently over it. It needs to pass that data *back* to the parent component, so that we can update the slotted contents.
+
+For this, we use *slot props*. In `Hoverable.svelte`, pass the `hovering` value into the slot:
+
+```html
+<div on:mouseenter={enter} on:mouseleave={leave}>
+	<slot hovering={hovering}></slot>
+</div>
+```
+
+> Remember you can also use the `{hovering}` shorthand, if you prefer.
+
+Then, to expose `hovering` to the contents of the `<Hoverable>` component, we use the `let` directive:
+
+```html
+<Hoverable let:hovering={hovering}>
+	<div class:active={hovering}>
+		{#if hovering}
+			<p>I am being hovered upon.</p>
+		{:else}
+			<p>Hover over me!</p>
+		{/if}
+	</div>
+</Hoverable>
+```
+
+You can rename the variable, if you want — let's call it `active` in the parent component:
+
+```html
+<Hoverable let:hovering={active}>
+	<div class:active>
+		{#if active}
+			<p>I am being hovered upon.</p>
+		{:else}
+			<p>Hover over me!</p>
+		{/if}
+	</div>
+</Hoverable>
+```
+
+You can have as many of these components you like, and the slotted props will remain local to the component where they're declared.
+
+> Named slots can also have props; use the `let` directive on an element with a `slot="..."` attribute, instead of on the component itself.

site/content/tutorial/99-todo/99-todo/text.md

@@ -72,6 +72,7 @@ Another one should cover how to set up an editor for syntax highlighting.
 * [x] Dimensions
 * [x] `this`
 * [ ] shorthand
+* [ ] component bindings
 
 Maybe lifecycle should go first, since we're using `onMount` in the `this` demo?
 
@@ -132,8 +133,8 @@ Maybe lifecycle should go first, since we're using `onMount` in the `this` demo?
 ## Composition
 
 * [x] `<slot>`
-* [ ] `<slot name="foo">`
-* [ ] `<slot bar={baz}>` and `let:bar`
+* [x] `<slot name="foo">`
+* [x] `<slot bar={baz}>` and `let:bar`
 
 
 ## Context