From 46fc0dec0b9939a7557cf2898f277ed723cd4a1c Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Mon, 4 Mar 2019 19:40:35 -0500
Subject: [PATCH] start slots section

---
 .../14-composition/01-slots/app-a/App.svelte  |  7 +++++
 .../14-composition/01-slots/app-a/Box.svelte  | 10 +++++++
 .../14-composition/01-slots/app-b/App.svelte  |  8 ++++++
 .../14-composition/01-slots/app-b/Box.svelte  | 10 +++++++
 .../tutorial/14-composition/01-slots/text.md  | 28 +++++++++++++++++++
 .../content/tutorial/14-composition/meta.json |  3 ++
 site/content/tutorial/99-todo/99-todo/text.md |  2 +-
 7 files changed, 67 insertions(+), 1 deletion(-)
 create mode 100644 site/content/tutorial/14-composition/01-slots/app-a/App.svelte
 create mode 100644 site/content/tutorial/14-composition/01-slots/app-a/Box.svelte
 create mode 100644 site/content/tutorial/14-composition/01-slots/app-b/App.svelte
 create mode 100644 site/content/tutorial/14-composition/01-slots/app-b/Box.svelte
 create mode 100644 site/content/tutorial/14-composition/01-slots/text.md
 create mode 100644 site/content/tutorial/14-composition/meta.json

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`