start slots section

site/content/tutorial/14-composition/01-slots/app-a/App.svelte

@@ -0,0 +1,7 @@
+<script>
+	import Box from './Box.svelte';
+</script>
+
+<Box>
+	<!-- put content here -->
+</Box>

site/content/tutorial/14-composition/01-slots/app-a/Box.svelte

@@ -0,0 +1,10 @@
+<style>
+	.box {
+		border: 2px solid black;
+		padding: 0.5em;
+	}
+</style>
+
+<div class="box">
+	<!-- content should be injected here -->
+</div>

site/content/tutorial/14-composition/01-slots/app-b/App.svelte

@@ -0,0 +1,8 @@
+<script>
+	import Box from './Box.svelte';
+</script>
+
+<Box>
+	<h2>Hello!</h2>
+	<p>This is a box. It can contain anything.</p>
+</Box>

site/content/tutorial/14-composition/01-slots/app-b/Box.svelte

@@ -0,0 +1,10 @@
+<style>
+	.box {
+		border: 2px solid black;
+		padding: 0.5em;
+	}
+</style>
+
+<div class="box">
+	<slot></slot>
+</div>

site/content/tutorial/14-composition/01-slots/text.md

@@ -0,0 +1,28 @@
+---
+title: Slots
+---
+
+Just like elements can have children...
+
+```html
+<div>
+	<p>I'm a child of the div</p>
+</div>
+```
+
+...so can components. Before a component can accept children, though, it needs to know where to put them. We do this with the `<slot>` element. Put this inside `Box.svelte`:
+
+```html
+<div class="box">
+	<slot></slot>
+</div>
+```
+
+You can now put things in the box:
+
+```html
+<Box>
+	<h2>Hello!</h2>
+	<p>This is a box. It can contain anything.</p>
+</Box>
+```

site/content/tutorial/14-composition/meta.json

@@ -0,0 +1,3 @@
+{
+	"title": "Component composition"
+}

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

@@ -131,7 +131,7 @@ Maybe lifecycle should go first, since we're using `onMount` in the `this` demo?
 
 ## Composition
 
-* [ ] `<slot>`
+* [x] `<slot>`
 * [ ] `<slot name="foo">`
 * [ ] `<slot bar={baz}>` and `let:bar`