docs: define component before demonstrating usage (#5921)

site/content/docs/02-template-syntax.md

@@ -1292,19 +1292,19 @@ Components can have child content, in the same way that elements can.
 The content is exposed in the child component using the `<slot>` element, which can contain fallback content that is rendered if no children are provided.
 
 ```sv
-<!-- App.svelte -->
-<Widget></Widget>
-
-<Widget>
-	<p>this is some child content that will overwrite the default slot content</p>
-</Widget>
-
 <!-- Widget.svelte -->
 <div>
 	<slot>
 		this fallback content will be rendered when no content is provided, like in the first example
 	</slot>
 </div>
+
+<!-- App.svelte -->
+<Widget></Widget> <!-- this component will render the default content -->
+
+<Widget>
+	<p>this is some child content that will overwrite the default slot content</p>
+</Widget>
 ```
 
 #### [`<slot name="`*name*`">`](slot_name)
@@ -1314,18 +1314,18 @@ The content is exposed in the child component using the `<slot>` element, which
 Named slots allow consumers to target specific areas. They can also have fallback content.
 
 ```sv
-<!-- App.svelte -->
-<Widget>
-	<h1 slot="header">Hello</h1>
-	<p slot="footer">Copyright (c) 2019 Svelte Industries</p>
-</Widget>
-
 <!-- 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>
+	<p slot="footer">Copyright (c) 2019 Svelte Industries</p>
+</Widget>
 ```
 
 #### [`$$slots`](slots_object)
@@ -1337,20 +1337,21 @@ Named slots allow consumers to target specific areas. They can also have fallbac
 Note that explicitly passing in an empty named slot will add that slot's name to `$$slots`. For example, if a parent passes `<div slot="title" />` to a child component, `$$slots.title` will be truthy within the child.
 
 ```sv
-<!-- App.svelte -->
-<Card>
-	<h1 slot="title">Blog Post Title</h1>
-</Card>
-
 <!-- Card.svelte -->
 <div>
 	<slot name="title"></slot>
 	{#if $$slots.description}
-		<!-- This slot and the <hr> before it will not render. -->
+		<!-- This <hr> and slot will render only if a slot named "description" is provided. -->
 		<hr>
 		<slot name="description"></slot>
 	{/if}
 </div>
+
+<!-- App.svelte -->
+<Card>
+	<h1 slot="title">Blog Post Title</h1>
+	<!-- No slot named "description" was provided so the optional slot will not be rendered. -->
+</Card>
 ```
 
 #### [`<slot let:`*name*`={`*value*`}>`](slot_let)
@@ -1362,11 +1363,6 @@ Slots can be rendered zero or more times, and can pass values *back* to the pare
 The usual shorthand rules apply — `let:item` is equivalent to `let:item={item}`, and `<slot {item}>` is equivalent to `<slot item={item}>`.
 
 ```sv
-<!-- App.svelte -->
-<FancyList {items} let:prop={thing}>
-	<div>{thing.text}</div>
-</FancyList>
-
 <!-- FancyList.svelte -->
 <ul>
 	{#each items as item}
@@ -1375,6 +1371,11 @@ The usual shorthand rules apply — `let:item` is equivalent to `let:item={item}
 		</li>
 	{/each}
 </ul>
+
+<!-- App.svelte -->
+<FancyList {items} let:prop={thing}>
+	<div>{thing.text}</div>
+</FancyList>
 ```
 
 ---
@@ -1382,12 +1383,6 @@ The usual shorthand rules apply — `let:item` is equivalent to `let:item={item}
 Named slots can also expose values. The `let:` directive goes on the element with the `slot` attribute.
 
 ```sv
-<!-- App.svelte -->
-<FancyList {items}>
-	<div slot="item" let:item>{item.text}</div>
-	<p slot="footer">Copyright (c) 2019 Svelte Industries</p>
-</FancyList>
-
 <!-- FancyList.svelte -->
 <ul>
 	{#each items as item}
@@ -1398,6 +1393,12 @@ Named slots can also expose values. The `let:` directive goes on the element wit
 </ul>
 
 <slot name="footer"></slot>
+
+<!-- App.svelte -->
+<FancyList {items}>
+	<div slot="item" let:item>{item.text}</div>
+	<p slot="footer">Copyright (c) 2019 Svelte Industries</p>
+</FancyList>
 ```