Add documentation and tutorial for svelte:fragment (#6097)

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>
 ```
 
+Components can be placed in a named slot using the syntax `<Component slot="name" />`.
+In order to place content in a slot 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>` 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 -->
+<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>
+```

site/content/tutorial/16-special-elements/08-svelte-fragment/app-a/App.svelte

@@ -0,0 +1,10 @@
+<script>
+	import Box from './Box.svelte'
+</script>
+
+<Box>
+	<div slot="footer">
+		<p>All rights reserved.</p>
+		<p>Copyright (c) 2019 Svelte Industries</p>
+	</div>
+</Box>

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>

site/content/tutorial/16-special-elements/08-svelte-fragment/app-b/App.svelte

@@ -0,0 +1,10 @@
+<script>
+	import Box from './Box.svelte'
+</script>
+
+<Box>
+	<svelte:fragment slot="footer">
+		<p>All rights reserved.</p>
+		<p>Copyright (c) 2019 Svelte Industries</p>
+	</svelte:fragment>
+</Box>

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>

site/content/tutorial/16-special-elements/08-svelte-fragment/text.md

@@ -0,0 +1,35 @@
+---
+title: <svelte:fragment>
+---
+
+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 `1em` to the box.
+
+```sv
+<!-- Box.svelte -->
+<style>
+	.box {		
+		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>
+```
+
+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. Replace the `<div>` with `<svelte:fragment>`:
+
+```sv
+<svelte:fragment slot="footer">
+	<p>All rights reserved.</p>
+	<p>Copyright (c) 2019 Svelte Industries</p>
+</svelte:fragment>
+```