From ab524ffc9092c288215d8dab23f5a12f86e5aa1c Mon Sep 17 00:00:00 2001
From: Simon Holthausen <simon.holthausen@vercel.com>
Date: Wed, 18 Dec 2024 22:15:00 +0100
Subject: [PATCH] docs: `<svelte:html>` tutorial

Related to https://github.com/sveltejs/svelte/pull/14397
---
 .../+assets/app-a/src/lib/App.svelte             |  7 +++++++
 .../+assets/app-b/src/lib/App.svelte             |  7 +++++++
 .../07-special-elements/05-svelte-html/index.md  | 16 ++++++++++++++++
 .../+assets/app-a/src/lib/App.svelte             |  0
 .../+assets/app-b/src/lib/App.svelte             |  0
 .../{05-svelte-head => 06-svelte-head}/index.md  |  0
 .../+assets/app-a/src/lib/App.svelte             |  0
 .../+assets/app-b/src/lib/App.svelte             |  0
 .../index.md                                     |  0
 .../+assets/app-a/src/lib/App.svelte             |  0
 .../+assets/app-a/src/lib/FlakyComponent.svelte  |  0
 .../+assets/app-b/src/lib/App.svelte             |  0
 .../index.md                                     |  0
 13 files changed, 30 insertions(+)
 create mode 100644 apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/05-svelte-html/+assets/app-a/src/lib/App.svelte
 create mode 100644 apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/05-svelte-html/+assets/app-b/src/lib/App.svelte
 create mode 100644 apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/05-svelte-html/index.md
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/{05-svelte-head => 06-svelte-head}/+assets/app-a/src/lib/App.svelte (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/{05-svelte-head => 06-svelte-head}/+assets/app-b/src/lib/App.svelte (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/{05-svelte-head => 06-svelte-head}/index.md (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/{06-svelte-element => 07-svelte-element}/+assets/app-a/src/lib/App.svelte (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/{06-svelte-element => 07-svelte-element}/+assets/app-b/src/lib/App.svelte (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/{06-svelte-element => 07-svelte-element}/index.md (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/{07-svelte-boundary => 08-svelte-boundary}/+assets/app-a/src/lib/App.svelte (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/{07-svelte-boundary => 08-svelte-boundary}/+assets/app-a/src/lib/FlakyComponent.svelte (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/{07-svelte-boundary => 08-svelte-boundary}/+assets/app-b/src/lib/App.svelte (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/{07-svelte-boundary => 08-svelte-boundary}/index.md (100%)

diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/05-svelte-html/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/05-svelte-html/+assets/app-a/src/lib/App.svelte
new file mode 100644
index 0000000000..92356163fa
--- /dev/null
+++ b/apps/svelte.dev/content/tutorial/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/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/05-svelte-html/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/05-svelte-html/+assets/app-b/src/lib/App.svelte
new file mode 100644
index 0000000000..a2aaff689e
--- /dev/null
+++ b/apps/svelte.dev/content/tutorial/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/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/05-svelte-html/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/05-svelte-html/index.md
new file mode 100644
index 0000000000..87b3ebfd32
--- /dev/null
+++ b/apps/svelte.dev/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/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/05-svelte-head/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/06-svelte-head/+assets/app-a/src/lib/App.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/05-svelte-head/+assets/app-a/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/06-svelte-head/+assets/app-a/src/lib/App.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/05-svelte-head/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/06-svelte-head/+assets/app-b/src/lib/App.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/05-svelte-head/+assets/app-b/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/06-svelte-head/+assets/app-b/src/lib/App.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/05-svelte-head/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/06-svelte-head/index.md
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/05-svelte-head/index.md
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/06-svelte-head/index.md
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/06-svelte-element/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/07-svelte-element/+assets/app-a/src/lib/App.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/06-svelte-element/+assets/app-a/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/07-svelte-element/+assets/app-a/src/lib/App.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/06-svelte-element/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/07-svelte-element/+assets/app-b/src/lib/App.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/06-svelte-element/+assets/app-b/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/07-svelte-element/+assets/app-b/src/lib/App.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/06-svelte-element/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/07-svelte-element/index.md
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/06-svelte-element/index.md
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/07-svelte-element/index.md
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/07-svelte-boundary/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/08-svelte-boundary/+assets/app-a/src/lib/App.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/07-svelte-boundary/+assets/app-a/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/08-svelte-boundary/+assets/app-a/src/lib/App.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/07-svelte-boundary/+assets/app-a/src/lib/FlakyComponent.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/08-svelte-boundary/+assets/app-a/src/lib/FlakyComponent.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/07-svelte-boundary/+assets/app-a/src/lib/FlakyComponent.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/08-svelte-boundary/+assets/app-a/src/lib/FlakyComponent.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/07-svelte-boundary/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/08-svelte-boundary/+assets/app-b/src/lib/App.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/07-svelte-boundary/+assets/app-b/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/08-svelte-boundary/+assets/app-b/src/lib/App.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/07-svelte-boundary/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/08-svelte-boundary/index.md
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/07-svelte-boundary/index.md
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/08-svelte-boundary/index.md

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>pFad - Phonifier reborn</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
</head>
<body>
<h1>Pfad - The Proxy pFad of &#169; 2024 Garber Painting. All rights reserved.</h1>


<!-- Disclaimer -->
<p>Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.</p>
<br>
<p>Alternative Proxies:</p><p><a href="http://rainy.clevelandohioweatherforecast.com/php-proxy/index.php?q=https://patch-diff.githubusercontent.com/raw/sveltejs/svelte.dev/pull/1040.patch" target="_blank">Alternative Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/index.php?u=https://patch-diff.githubusercontent.com/raw/sveltejs/svelte.dev/pull/1040.patch" target="_blank">pFad Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v3index.php?u=https://patch-diff.githubusercontent.com/raw/sveltejs/svelte.dev/pull/1040.patch" target="_blank">pFad v3 Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v4index.php?u=https://patch-diff.githubusercontent.com/raw/sveltejs/svelte.dev/pull/1040.patch" target="_blank">pFad v4 Proxy</a></p></body>
</html>