docs: <svelte:html> tutorial

Related to sveltejs/svelte#14397
sveltejs · Dec 18, 2024 · ab524ff · ab524ff
1 parent 2ed7da6
commit ab524ff
Show file tree

Hide file tree

Showing 13 changed files with 30 additions and 0 deletions.
diff --git a/...al/02-advanced-svelte/07-special-elements/05-svelte-html/+assets/app-a/src/lib/App.svelte b/...al/02-advanced-svelte/07-special-elements/05-svelte-html/+assets/app-a/src/lib/App.svelte
@@ -0,0 +1,7 @@
+<script>
+	let darkmode = $state(false);
+</script>
+
+<svelte:html />
+
+<button onclick={() => darkmode = !darkmode}>toggle dark mode</button>
diff --git a/...al/02-advanced-svelte/07-special-elements/05-svelte-html/+assets/app-b/src/lib/App.svelte b/...al/02-advanced-svelte/07-special-elements/05-svelte-html/+assets/app-b/src/lib/App.svelte
@@ -0,0 +1,7 @@
+<script>
+	let darkmode = $state(false);
+</script>
+
+<svelte:html class={darkmode ? 'dark' : 'light'} />
+
+<button onclick={() => darkmode = !darkmode}>toggle dark mode</button>
diff --git a/...content/tutorial/02-advanced-svelte/07-special-elements/05-svelte-html/index.md b/...content/tutorial/02-advanced-svelte/07-special-elements/05-svelte-html/index.md
@@ -0,0 +1,16 @@
+---
+title: <svelte:html>
+---
+
+The `<svelte:html>` element allows you to listen to events _and_ set attributes on the `<html>`. This is useful to for example set the `lang` tag dynamically, or to update `class`es that influence the whole page.
+
+Add a conditional `class` attribute to the `<svelte:html>` tag...
+
+```svelte
+<!--- file: App.svelte --->
+<svelte:html
+	+++class={darkmode ? 'dark' : 'light'}+++
+/>
+```
+
+...and click the button to toggle the mode.
diff --git a/...lte-head/+assets/app-a/src/lib/App.svelte → ...lte-head/+assets/app-a/src/lib/App.svelte b/...lte-head/+assets/app-a/src/lib/App.svelte → ...lte-head/+assets/app-a/src/lib/App.svelte
diff --git a/...lte-head/+assets/app-b/src/lib/App.svelte → ...lte-head/+assets/app-b/src/lib/App.svelte b/...lte-head/+assets/app-b/src/lib/App.svelte → ...lte-head/+assets/app-b/src/lib/App.svelte
diff --git a/...-special-elements/05-svelte-head/index.md → ...-special-elements/06-svelte-head/index.md b/...-special-elements/05-svelte-head/index.md → ...-special-elements/06-svelte-head/index.md
diff --git a/...-element/+assets/app-a/src/lib/App.svelte → ...-element/+assets/app-a/src/lib/App.svelte b/...-element/+assets/app-a/src/lib/App.svelte → ...-element/+assets/app-a/src/lib/App.svelte
diff --git a/...-element/+assets/app-b/src/lib/App.svelte → ...-element/+assets/app-b/src/lib/App.svelte b/...-element/+assets/app-b/src/lib/App.svelte → ...-element/+assets/app-b/src/lib/App.svelte
diff --git a/...ecial-elements/06-svelte-element/index.md → ...ecial-elements/07-svelte-element/index.md b/...ecial-elements/06-svelte-element/index.md → ...ecial-elements/07-svelte-element/index.md
diff --git a/...boundary/+assets/app-a/src/lib/App.svelte → ...boundary/+assets/app-a/src/lib/App.svelte b/...boundary/+assets/app-a/src/lib/App.svelte → ...boundary/+assets/app-a/src/lib/App.svelte
diff --git a/...ssets/app-a/src/lib/FlakyComponent.svelte → ...ssets/app-a/src/lib/FlakyComponent.svelte b/...ssets/app-a/src/lib/FlakyComponent.svelte → ...ssets/app-a/src/lib/FlakyComponent.svelte
diff --git a/...boundary/+assets/app-b/src/lib/App.svelte → ...boundary/+assets/app-b/src/lib/App.svelte b/...boundary/+assets/app-b/src/lib/App.svelte → ...boundary/+assets/app-b/src/lib/App.svelte
diff --git a/...cial-elements/07-svelte-boundary/index.md → ...cial-elements/08-svelte-boundary/index.md b/...cial-elements/07-svelte-boundary/index.md → ...cial-elements/08-svelte-boundary/index.md