add tutorial section

site/content/tutorial/16-special-elements/03-svelte-element/app-a/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}

site/content/tutorial/16-special-elements/03-svelte-element/app-b/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>

site/content/tutorial/16-special-elements/03-svelte-element/text.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.