docs: add svelte:element/document chapters

from old tutorial - also updates some existing content

content/tutorial/03-advanced-svelte/09-special-elements/01-svelte-self/app-a/src/lib/Folder.svelte

@@ -10,9 +10,7 @@
 	}
 </script>
 
-<span class:expanded on:click={toggle}
-	>{name}</span
->
+<button class:expanded on:click={toggle}>{name}</button>
 
 {#if expanded}
 	<ul>
@@ -29,13 +27,14 @@
 {/if}
 
 <style>
-	span {
+	button {
 		padding: 0 0 0 1.5em;
-		background: url(https://github.com/tutorial/icons/folder.svg) 0
-			0.1em no-repeat;
+		background: url(https://github.com/tutorial/icons/folder.svg) 0 0.1em no-repeat;
 		background-size: 1em 1em;
 		font-weight: bold;
 		cursor: pointer;
+		border: none;
+		margin: 0;
 	}
 
 	.expanded {

content/tutorial/03-advanced-svelte/09-special-elements/01-svelte-self/app-b/src/lib/Folder.svelte

@@ -10,9 +10,7 @@
 	}
 </script>
 
-<span class:expanded on:click={toggle}
-	>{name}</span
->
+<button class:expanded on:click={toggle}>{name}</button>
 
 {#if expanded}
 	<ul>
@@ -29,13 +27,14 @@
 {/if}
 
 <style>
-	span {
+	button {
 		padding: 0 0 0 1.5em;
-		background: url(https://github.com/tutorial/icons/folder.svg) 0
-			0.1em no-repeat;
+		background: url(https://github.com/tutorial/icons/folder.svg) 0 0.1em no-repeat;
 		background-size: 1em 1em;
 		font-weight: bold;
 		cursor: pointer;
+		border: none;
+		margin: 0;
 	}
 
 	.expanded {

content/tutorial/03-advanced-svelte/09-special-elements/03-svelte-element/README.md

@@ -0,0 +1,23 @@
+---
+title: <svelte:element>
+---
+
+Sometimes we don't know in advance what kind of DOM element to render. `<svelte:element>` comes in handy here. Instead of a sequence of `if` blocks...
+
+```html
+{#if selected === 'h1'}
+	<h1>I'm a h1 tag</h1>
+{:else if selected === 'h3'}
+	<h3>I'm a h3 tag</h3>
+{:else if selected === 'p'}
+	<p>I'm a p tag</p>
+{/if}
+```
+
+...we can have a single dynamic component:
+
+```html
+<svelte:element this={selected}>I'm a {selected} tag</svelte:element>
+```
+
+The `this` value can be any string, or a falsy value — if it's falsy, no element is rendered.

content/tutorial/03-advanced-svelte/09-special-elements/03-svelte-element/app-a/src/lib/App.svelte

@@ -0,0 +1,18 @@
+<script>
+	const options = ['h1', 'h3', 'p'];
+	let selected = options[0];
+</script>
+
+<select bind:value={selected}>
+	{#each options as option}
+		<option value={option}>{option}</option>
+	{/each}
+</select>
+
+{#if selected === 'h1'}
+	<h1>I'm a h1 tag</h1>
+{:else if selected === 'h3'}
+	<h3>I'm a h3 tag</h3>
+{:else if selected === 'p'}
+	<p>I'm a p tag</p>
+{/if}

content/tutorial/03-advanced-svelte/09-special-elements/03-svelte-element/app-b/src/lib/App.svelte

@@ -0,0 +1,12 @@
+<script>
+	const options = ['h1', 'h3', 'p'];
+	let selected = options[0];
+</script>
+
+<select bind:value={selected}>
+	{#each options as option}
+		<option value={option}>{option}</option>
+	{/each}
+</select>
+
+<svelte:element this={selected}>I'm a {selected} tag</svelte:element>

content/tutorial/03-advanced-svelte/09-special-elements/06-svelte-document/README.md

@@ -0,0 +1,13 @@
+---
+title: <svelte:document>
+---
+
+Similar to `<svelte:window>`, the `<svelte:document>` element allows you to listen for events that fire on `document`. This is useful with events like `selectionchange`, which doesn't fire on `window`.
+
+Add the `selectionchange` handler to the `<svelte:document>` tag:
+
+```html
+<svelte:document on:selectionchange={handleSelectionChange} />
+```
+
+> Avoid `mouseenter` and `mouseleave` handlers on this element, these events are not fired on `document` in all browsers. Use `<svelte:body>` for this instead. 

content/tutorial/03-advanced-svelte/09-special-elements/06-svelte-document/app-a/src/libApp.svelte

@@ -0,0 +1,10 @@
+<script>
+	let selection = '';
+
+	const handleSelectionChange = (e) => selection = document.getSelection();
+</script>
+
+<svelte:body />
+
+<p>Select this text to fire events</p>
+<p>Selection: {selection}</p>

content/tutorial/03-advanced-svelte/09-special-elements/06-svelte-document/app-b/src/lib/App.svelte

@@ -0,0 +1,10 @@
+<script>
+	let selection = '';
+
+	const handleSelectionChange = (e) => selection = document.getSelection();
+</script>
+
+<svelte:document on:selectionchange={handleSelectionChange} />
+
+<p>Select this text to fire events</p>
+<p>Selection: {selection}</p>

content/tutorial/03-advanced-svelte/09-special-elements/07-svelte-options/app-a/src/lib/Todo.svelte → content/tutorial/03-advanced-svelte/09-special-elements/09-svelte-options/app-a/src/lib/Todo.svelte

@@ -4,22 +4,24 @@
 
 	export let todo;
 
-	let div;
+	let button;
 
 	afterUpdate(() => {
-		flash(div);
+		flash(button);
 	});
 </script>
 
 <!-- the text will flash red whenever
      the `todo` object changes -->
-<div bind:this={div} on:click>
+<button bind:this={button} type="button" on:click>
 	{todo.done ? '👍' : ''}
 	{todo.text}
-</div>
+</button>
 
 <style>
-	div {
+	button {
+		all: unset;
+		display: block;
 		cursor: pointer;
 		line-height: 1.5;
 	}

content/tutorial/03-advanced-svelte/09-special-elements/07-svelte-options/app-b/src/lib/Todo.svelte → content/tutorial/03-advanced-svelte/09-special-elements/09-svelte-options/app-b/src/lib/Todo.svelte

@@ -6,22 +6,24 @@
 
 	export let todo;
 
-	let div;
+	let button;
 
 	afterUpdate(() => {
-		flash(div);
+		flash(button);
 	});
 </script>
 
 <!-- the text will flash red whenever
      the `todo` object changes -->
-<div bind:this={div} on:click>
+<button bind:this={button} type="button" on:click>
 	{todo.done ? '👍' : ''}
 	{todo.text}
-</div>
+</button>
 
 <style>
-	div {
+	button {
+		all: unset;
+		display: block;
 		cursor: pointer;
 		line-height: 1.5;
 	}