Skip to content

Commit ab524ff

Browse files
dummdidummdummdidumm
committed
docs: <svelte:html> tutorial
Related to sveltejs/svelte#14397
1 parent 2ed7da6 commit ab524ff

File tree

13 files changed

+30
-0
lines changed

13 files changed

+30
-0
lines changed

‎apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/05-svelte-html/+assets/app-a/src/lib/App.svelte‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<script>
2+
let darkmode = $state(false);
3+
</script>
4+
5+
<svelte:html />
6+
7+
<button onclick={() => darkmode = !darkmode}>toggle dark mode</button>

‎apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/05-svelte-html/+assets/app-b/src/lib/App.svelte‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<script>
2+
let darkmode = $state(false);
3+
</script>
4+
5+
<svelte:html class={darkmode ? 'dark' : 'light'} />
6+
7+
<button onclick={() => darkmode = !darkmode}>toggle dark mode</button>

‎apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/05-svelte-html/index.md‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
---
2+
title: <svelte:html>
3+
---
4+
5+
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.
6+
7+
Add a conditional `class` attribute to the `<svelte:html>` tag...
8+
9+
```svelte
10+
<!--- file: App.svelte --->
11+
<svelte:html
12+
+++class={darkmode ? 'dark' : 'light'}+++
13+
/>
14+
```
15+
16+
...and click the button to toggle the mode.

‎apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/05-svelte-head/+assets/app-a/src/lib/App.svelte‎ renamed to ‎apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/06-svelte-head/+assets/app-a/src/lib/App.svelte‎

File renamed without changes.

‎apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/05-svelte-head/+assets/app-b/src/lib/App.svelte‎ renamed to ‎apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/06-svelte-head/+assets/app-b/src/lib/App.svelte‎

File renamed without changes.

‎apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/05-svelte-head/index.md‎ renamed to ‎apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/06-svelte-head/index.md‎

File renamed without changes.

‎apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/06-svelte-element/+assets/app-a/src/lib/App.svelte‎ renamed to ‎apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/07-svelte-element/+assets/app-a/src/lib/App.svelte‎

File renamed without changes.

‎apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/06-svelte-element/+assets/app-b/src/lib/App.svelte‎ renamed to ‎apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/07-svelte-element/+assets/app-b/src/lib/App.svelte‎

File renamed without changes.

‎apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/06-svelte-element/index.md‎ renamed to ‎apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/07-svelte-element/index.md‎

File renamed without changes.

‎apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/07-svelte-boundary/+assets/app-a/src/lib/App.svelte‎ renamed to ‎apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/08-svelte-boundary/+assets/app-a/src/lib/App.svelte‎

File renamed without changes.

0 commit comments

Comments
 (0)