diff --git a/site/content/tutorial/14-composition/01-slots/app-a/App.svelte b/site/content/tutorial/14-composition/01-slots/app-a/App.svelte
new file mode 100644
index 0000000000..14ce1bb677
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/site/content/tutorial/14-composition/01-slots/app-a/Box.svelte b/site/content/tutorial/14-composition/01-slots/app-a/Box.svelte
new file mode 100644
index 0000000000..9b3b7c22f9
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/site/content/tutorial/14-composition/01-slots/app-b/App.svelte b/site/content/tutorial/14-composition/01-slots/app-b/App.svelte
new file mode 100644
index 0000000000..cd0ebde935
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/site/content/tutorial/14-composition/01-slots/app-b/Box.svelte b/site/content/tutorial/14-composition/01-slots/app-b/Box.svelte
new file mode 100644
index 0000000000..4a6a89aa3c
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/site/content/tutorial/14-composition/01-slots/text.md b/site/content/tutorial/14-composition/01-slots/text.md
new file mode 100644
index 0000000000..f26859c29e
--- /dev/null
+++ b/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>
+```
\ No newline at end of file
diff --git a/site/content/tutorial/14-composition/meta.json b/site/content/tutorial/14-composition/meta.json
new file mode 100644
index 0000000000..54cf2db82d
--- /dev/null
+++ b/site/content/tutorial/14-composition/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Component composition"
+}
\ No newline at end of file
diff --git a/site/content/tutorial/99-todo/99-todo/text.md b/site/content/tutorial/99-todo/99-todo/text.md
index 8c4b140565..2241e33245 100644
--- a/site/content/tutorial/99-todo/99-todo/text.md
+++ b/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`