From 2466f8414e970e01f6705af512682d4a782d7a49 Mon Sep 17 00:00:00 2001
From: stephane-vanraes <stephane.vanraes@gmail.com>
Date: Thu, 18 Mar 2021 20:57:45 +0100
Subject: [PATCH 1/5] Add documentation and tutorial for svelte:fragment

---
 site/content/docs/02-template-syntax.md       | 44 +++++++++++++++++++
 .../08-svelte-fragment/app-a/App.svelte       | 11 +++++
 .../08-svelte-fragment/app-a/Box.svelte       | 20 +++++++++
 .../08-svelte-fragment/app-b/App.svelte       | 11 +++++
 .../08-svelte-fragment/app-b/Box.svelte       | 20 +++++++++
 .../08-svelte-fragment/text.md                | 43 ++++++++++++++++++
 6 files changed, 149 insertions(+)
 create mode 100644 site/content/tutorial/16-special-elements/08-svelte-fragment/app-a/App.svelte
 create mode 100644 site/content/tutorial/16-special-elements/08-svelte-fragment/app-a/Box.svelte
 create mode 100644 site/content/tutorial/16-special-elements/08-svelte-fragment/app-b/App.svelte
 create mode 100644 site/content/tutorial/16-special-elements/08-svelte-fragment/app-b/Box.svelte
 create mode 100644 site/content/tutorial/16-special-elements/08-svelte-fragment/text.md

diff --git a/site/content/docs/02-template-syntax.md b/site/content/docs/02-template-syntax.md
index 2c665376dcf6..2cd973cf315d 100644
--- a/site/content/docs/02-template-syntax.md
+++ b/site/content/docs/02-template-syntax.md
@@ -1328,6 +1328,28 @@ Named slots allow consumers to target specific areas. They can also have fallbac
 </Widget>
 ```
 
+Named slots can also be used with components `<Component slot="name" />`.
+In order to place content in a slot without losing the flow layout (ie: without using a wrapper element) you can use the special element `<svelte:fragment>`.
+
+```sv
+<!-- Widget.svelte -->
+<div>
+	<slot name="header">No header was provided</slot>
+	<p>Some content between header and footer</p>
+	<slot name="footer"></slot>
+</div>
+
+<!-- App.svelte -->
+<Widget>
+	<HeaderComponent slot="header" />
+	<svelte:fragment slot="footer">
+		<p>All rights reserved.</p>
+		<p>Copyright (c) 2019 Svelte Industries</p>
+	</svelte:fragment>
+</Widget>
+```
+
+
 #### [`$$slots`](slots_object)
 
 ---
@@ -1537,3 +1559,25 @@ The `<svelte:options>` element provides a place to specify per-component compile
 ```sv
 <svelte:options tag="my-custom-element"/>
 ```
+
+### `<svelte:fragment>`
+
+The `<svelte:fragment>` allows you to place content in a named [docs](docs#slot_name) without wrapping it in a container, this allows to keep intact the flow layout of your document.
+
+```sv
+<!-- Widget.svelte -->
+<div>
+	<slot name="header">No header was provided</slot>
+	<p>Some content between header and footer</p>
+	<slot name="footer"></slot>
+</div>
+
+<!-- App.svelte -->
+<Widget>
+	<h1 slot="header">Hello</h1>
+	<svelte:fragment slot="footer">
+		<p>All rights reserved.</p>
+		<p>Copyright (c) 2019 Svelte Industries</p>
+	</svelte:fragment>
+</Widget>
+```
diff --git a/site/content/tutorial/16-special-elements/08-svelte-fragment/app-a/App.svelte b/site/content/tutorial/16-special-elements/08-svelte-fragment/app-a/App.svelte
new file mode 100644
index 000000000000..3708b348805d
--- /dev/null
+++ b/site/content/tutorial/16-special-elements/08-svelte-fragment/app-a/App.svelte
@@ -0,0 +1,11 @@
+<script>
+	import Box from './Box.svelte'
+</script>
+
+<!-- App.svelte -->
+<Box>
+	<div slot="footer">
+		<p>All rights reserved.</p>
+		<p>Copyright (c) 2019 Svelte Industries</p>
+	</div>
+</Box>
\ No newline at end of file
diff --git a/site/content/tutorial/16-special-elements/08-svelte-fragment/app-a/Box.svelte b/site/content/tutorial/16-special-elements/08-svelte-fragment/app-a/Box.svelte
new file mode 100644
index 000000000000..16c17f90ef26
--- /dev/null
+++ b/site/content/tutorial/16-special-elements/08-svelte-fragment/app-a/Box.svelte
@@ -0,0 +1,20 @@
+<style>
+	.box {
+		width: 300px;
+		border: 1px solid #aaa;
+		border-radius: 2px;
+		box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
+		padding: 1em;
+		margin: 0 0 1em 0;
+		
+		display: flex;
+		flex-direction: column;
+		gap: 1em;
+	}
+</style>
+
+<div class="box">
+	<slot name="header">No header was provided</slot>
+	<p>Some content between header and footer</p>
+	<slot name="footer"></slot>
+</div>
diff --git a/site/content/tutorial/16-special-elements/08-svelte-fragment/app-b/App.svelte b/site/content/tutorial/16-special-elements/08-svelte-fragment/app-b/App.svelte
new file mode 100644
index 000000000000..2724752b8035
--- /dev/null
+++ b/site/content/tutorial/16-special-elements/08-svelte-fragment/app-b/App.svelte
@@ -0,0 +1,11 @@
+<script>
+	import Box from './Box.svelte'
+</script>
+
+<!-- App.svelte -->
+<Box>
+	<svelte:fragment slot="footer">
+		<p>All rights reserved.</p>
+		<p>Copyright (c) 2019 Svelte Industries</p>
+	</svelte:fragment>
+</Box>
diff --git a/site/content/tutorial/16-special-elements/08-svelte-fragment/app-b/Box.svelte b/site/content/tutorial/16-special-elements/08-svelte-fragment/app-b/Box.svelte
new file mode 100644
index 000000000000..16c17f90ef26
--- /dev/null
+++ b/site/content/tutorial/16-special-elements/08-svelte-fragment/app-b/Box.svelte
@@ -0,0 +1,20 @@
+<style>
+	.box {
+		width: 300px;
+		border: 1px solid #aaa;
+		border-radius: 2px;
+		box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
+		padding: 1em;
+		margin: 0 0 1em 0;
+		
+		display: flex;
+		flex-direction: column;
+		gap: 1em;
+	}
+</style>
+
+<div class="box">
+	<slot name="header">No header was provided</slot>
+	<p>Some content between header and footer</p>
+	<slot name="footer"></slot>
+</div>
diff --git a/site/content/tutorial/16-special-elements/08-svelte-fragment/text.md b/site/content/tutorial/16-special-elements/08-svelte-fragment/text.md
new file mode 100644
index 000000000000..850525695570
--- /dev/null
+++ b/site/content/tutorial/16-special-elements/08-svelte-fragment/text.md
@@ -0,0 +1,43 @@
+---
+title: <svelte:fragment>
+---
+
+The `<svelte:fragment>` element allows you to add content to a named slot without breaking the document's flow layout.
+
+In the example notice how we applied a flex layout with a gap of 2em to the box.
+
+```sv
+<!-- Box.svelte -->
+<style>
+	.box {
+		width: 300px;
+		border: 1px solid #aaa;
+		border-radius: 2px;
+		box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
+		padding: 1em;
+		margin: 0 0 1em 0;
+		
+		display: flex;
+		flex-direction: column;
+		gap: 1em;
+	}
+</style>
+
+<div class="box">
+	<slot name="header">No header was provided</slot>
+	<p>Some content between header and footer</p>
+	<slot name="footer"></slot>
+</div>
+```
+
+The content in the footer however is not spaced out according to this rythm because wrapping it in a div created a new flow layout.
+
+We can solve this by changing `<div slot="footer">` in the `App` component:
+
+```sv
+<svelte:fragment slot="footer">
+	<p>All rights reserved.</p>
+	<p>Copyright (c) 2019 Svelte Industries</p>
+</svelte:fragment>
+```
+

From 2ddb127ebc5ae196076be0e874e73f4b592ba666 Mon Sep 17 00:00:00 2001
From: Stephane <stephane-vanraes@users.noreply.github.com>
Date: Fri, 19 Mar 2021 23:43:08 +0100
Subject: [PATCH 2/5] Apply suggestions from code review

Co-authored-by: Geoff Rich <geoff.s.rich@gmail.com>
---
 site/content/docs/02-template-syntax.md                       | 4 ++--
 .../tutorial/16-special-elements/08-svelte-fragment/text.md   | 3 +--
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/site/content/docs/02-template-syntax.md b/site/content/docs/02-template-syntax.md
index 2cd973cf315d..06fbfce06cff 100644
--- a/site/content/docs/02-template-syntax.md
+++ b/site/content/docs/02-template-syntax.md
@@ -1328,7 +1328,7 @@ Named slots allow consumers to target specific areas. They can also have fallbac
 </Widget>
 ```
 
-Named slots can also be used with components `<Component slot="name" />`.
+Components can be placed in a named slot using the syntax `<Component slot="name" />`.
 In order to place content in a slot without losing the flow layout (ie: without using a wrapper element) you can use the special element `<svelte:fragment>`.
 
 ```sv
@@ -1562,7 +1562,7 @@ The `<svelte:options>` element provides a place to specify per-component compile
 
 ### `<svelte:fragment>`
 
-The `<svelte:fragment>` allows you to place content in a named [docs](docs#slot_name) without wrapping it in a container, this allows to keep intact the flow layout of your document.
+The `<svelte:fragment>` element allows you to place content in a named [docs](docs#slot_name) without wrapping it in a container. This keeps the flow layout of your document intact.
 
 ```sv
 <!-- Widget.svelte -->
diff --git a/site/content/tutorial/16-special-elements/08-svelte-fragment/text.md b/site/content/tutorial/16-special-elements/08-svelte-fragment/text.md
index 850525695570..0132f5463668 100644
--- a/site/content/tutorial/16-special-elements/08-svelte-fragment/text.md
+++ b/site/content/tutorial/16-special-elements/08-svelte-fragment/text.md
@@ -30,7 +30,7 @@ In the example notice how we applied a flex layout with a gap of 2em to the box.
 </div>
 ```
 
-The content in the footer however is not spaced out according to this rythm because wrapping it in a div created a new flow layout.
+However, the content in the footer is not spaced out according to this rhythm because wrapping it in a div created a new flow layout.
 
 We can solve this by changing `<div slot="footer">` in the `App` component:
 
@@ -40,4 +40,3 @@ We can solve this by changing `<div slot="footer">` in the `App` component:
 	<p>Copyright (c) 2019 Svelte Industries</p>
 </svelte:fragment>
 ```
-

From a697a2bcc9ae93fd14931f020b4ced6d3fbe6145 Mon Sep 17 00:00:00 2001
From: stephane-vanraes <stephane.vanraes@gmail.com>
Date: Fri, 19 Mar 2021 23:45:12 +0100
Subject: [PATCH 3/5] Add new line to tutorial

---
 .../16-special-elements/08-svelte-fragment/app-a/App.svelte     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/content/tutorial/16-special-elements/08-svelte-fragment/app-a/App.svelte b/site/content/tutorial/16-special-elements/08-svelte-fragment/app-a/App.svelte
index 3708b348805d..33a492087228 100644
--- a/site/content/tutorial/16-special-elements/08-svelte-fragment/app-a/App.svelte
+++ b/site/content/tutorial/16-special-elements/08-svelte-fragment/app-a/App.svelte
@@ -8,4 +8,4 @@
 		<p>All rights reserved.</p>
 		<p>Copyright (c) 2019 Svelte Industries</p>
 	</div>
-</Box>
\ No newline at end of file
+</Box>

From dabe8f847676006071e1384c2ee5742e948520d5 Mon Sep 17 00:00:00 2001
From: stephane-vanraes <stephane.vanraes@gmail.com>
Date: Sun, 28 Mar 2021 19:38:27 +0200
Subject: [PATCH 4/5] Apply suggestions for svelte:fragment docs and tut

---
 site/content/docs/02-template-syntax.md           |  2 +-
 .../08-svelte-fragment/app-a/App.svelte           |  1 -
 .../08-svelte-fragment/app-b/App.svelte           |  1 -
 .../08-svelte-fragment/text.md                    | 15 ++++-----------
 4 files changed, 5 insertions(+), 14 deletions(-)

diff --git a/site/content/docs/02-template-syntax.md b/site/content/docs/02-template-syntax.md
index 06fbfce06cff..19d96430b02d 100644
--- a/site/content/docs/02-template-syntax.md
+++ b/site/content/docs/02-template-syntax.md
@@ -1562,7 +1562,7 @@ The `<svelte:options>` element provides a place to specify per-component compile
 
 ### `<svelte:fragment>`
 
-The `<svelte:fragment>` element allows you to place content in a named [docs](docs#slot_name) without wrapping it in a container. This keeps the flow layout of your document intact.
+The `<svelte:fragment>` element allows you to place content in a named [docs](docs#slot_name) without wrapping it in a container DOM element. This keeps the flow layout of your document intact.
 
 ```sv
 <!-- Widget.svelte -->
diff --git a/site/content/tutorial/16-special-elements/08-svelte-fragment/app-a/App.svelte b/site/content/tutorial/16-special-elements/08-svelte-fragment/app-a/App.svelte
index 33a492087228..35f258685770 100644
--- a/site/content/tutorial/16-special-elements/08-svelte-fragment/app-a/App.svelte
+++ b/site/content/tutorial/16-special-elements/08-svelte-fragment/app-a/App.svelte
@@ -2,7 +2,6 @@
 	import Box from './Box.svelte'
 </script>
 
-<!-- App.svelte -->
 <Box>
 	<div slot="footer">
 		<p>All rights reserved.</p>
diff --git a/site/content/tutorial/16-special-elements/08-svelte-fragment/app-b/App.svelte b/site/content/tutorial/16-special-elements/08-svelte-fragment/app-b/App.svelte
index 2724752b8035..6f55903ece7b 100644
--- a/site/content/tutorial/16-special-elements/08-svelte-fragment/app-b/App.svelte
+++ b/site/content/tutorial/16-special-elements/08-svelte-fragment/app-b/App.svelte
@@ -2,7 +2,6 @@
 	import Box from './Box.svelte'
 </script>
 
-<!-- App.svelte -->
 <Box>
 	<svelte:fragment slot="footer">
 		<p>All rights reserved.</p>
diff --git a/site/content/tutorial/16-special-elements/08-svelte-fragment/text.md b/site/content/tutorial/16-special-elements/08-svelte-fragment/text.md
index 0132f5463668..fca7aeb8441a 100644
--- a/site/content/tutorial/16-special-elements/08-svelte-fragment/text.md
+++ b/site/content/tutorial/16-special-elements/08-svelte-fragment/text.md
@@ -2,21 +2,14 @@
 title: <svelte:fragment>
 ---
 
-The `<svelte:fragment>` element allows you to add content to a named slot without breaking the document's flow layout.
+The `<svelte:fragment>` element allows you to place content in a named slot without wrapping it in a container DOM element. This keeps the flow layout of your document intact.
 
-In the example notice how we applied a flex layout with a gap of 2em to the box.
+In the example notice how we applied a flex layout with a gap of `1em` to the box.
 
 ```sv
 <!-- Box.svelte -->
 <style>
-	.box {
-		width: 300px;
-		border: 1px solid #aaa;
-		border-radius: 2px;
-		box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
-		padding: 1em;
-		margin: 0 0 1em 0;
-		
+	.box {		
 		display: flex;
 		flex-direction: column;
 		gap: 1em;
@@ -32,7 +25,7 @@ In the example notice how we applied a flex layout with a gap of 2em to the box.
 
 However, the content in the footer is not spaced out according to this rhythm because wrapping it in a div created a new flow layout.
 
-We can solve this by changing `<div slot="footer">` in the `App` component:
+We can solve this by changing `<div slot="footer">` in the `App` component. Replace the `<div>` with `<svelte:fragment>`:
 
 ```sv
 <svelte:fragment slot="footer">

From f40994545d0259894547079b491aafb4a71d8616 Mon Sep 17 00:00:00 2001
From: stephane-vanraes <stephane.vanraes@gmail.com>
Date: Mon, 29 Mar 2021 20:47:13 +0200
Subject: [PATCH 5/5] Minor tweaks to doc for svelte:fragment

---
 site/content/docs/02-template-syntax.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/site/content/docs/02-template-syntax.md b/site/content/docs/02-template-syntax.md
index 19d96430b02d..0e0e8e400822 100644
--- a/site/content/docs/02-template-syntax.md
+++ b/site/content/docs/02-template-syntax.md
@@ -1329,7 +1329,7 @@ Named slots allow consumers to target specific areas. They can also have fallbac
 ```
 
 Components can be placed in a named slot using the syntax `<Component slot="name" />`.
-In order to place content in a slot without losing the flow layout (ie: without using a wrapper element) you can use the special element `<svelte:fragment>`.
+In order to place content in a slot without using a wrapper element, you can use the special element `<svelte:fragment>`.
 
 ```sv
 <!-- Widget.svelte -->
@@ -1562,7 +1562,7 @@ The `<svelte:options>` element provides a place to specify per-component compile
 
 ### `<svelte:fragment>`
 
-The `<svelte:fragment>` element allows you to place content in a named [docs](docs#slot_name) without wrapping it in a container DOM element. This keeps the flow layout of your document intact.
+The `<svelte:fragment>` element allows you to place content in a [named slot](docs#slot_name) without wrapping it in a container DOM element. This keeps the flow layout of your document intact.
 
 ```sv
 <!-- Widget.svelte -->