From 4285bf9c786395bebd582e6ef7a57f48f2b0b5e6 Mon Sep 17 00:00:00 2001
From: Ben McCann <322311+benmccann@users.noreply.github.com>
Date: Thu, 20 Mar 2025 13:45:09 -0700
Subject: [PATCH] docs: move $host docs to custom elements page

---
 documentation/docs/02-runes/08-$host.md       | 37 -------------------
 .../docs/07-misc/04-custom-elements.md        | 36 ++++++++++++++++++
 2 files changed, 36 insertions(+), 37 deletions(-)
 delete mode 100644 documentation/docs/02-runes/08-$host.md

diff --git a/documentation/docs/02-runes/08-$host.md b/documentation/docs/02-runes/08-$host.md
deleted file mode 100644
index 7b5e041e5e..0000000000
--- a/documentation/docs/02-runes/08-$host.md
+++ /dev/null
@@ -1,37 +0,0 @@
----
-title: $host
----
-
-When compiling a component as a custom element, the `$host` rune provides access to the host element, allowing you to (for example) dispatch custom events ([demo](/playground/untitled#H4sIAAAAAAAAE41Ry2rDMBD8FSECtqkTt1fHFpSSL-ix7sFRNkTEXglrnTYY_3uRlDgxTaEHIfYxs7szA9-rBizPPwZOZwM89wmecqxbF70as7InaMjltrWFR3mpkQDJ8pwXVnbKkKiwItUa3RGLVtk7gTHQXRDR2lXda4CY1D0SK9nCUk0QPyfrCovsRoNFe17aQOAwGncgO2gBqRzihJXiQrEs2csYOhQ-7HgKHaLIbpRhhBG-I2eD_8ciM4KnnOCbeE5dD2P6h0Dz0-Yi_arNhPLJXBtSGi2TvSXdbpqwdsXvjuYsC1veabvvUTog2ylrapKH2G2XsMFLS4uDthQnq2t1cwKkGOGLvYU5PvaQxLsxOkPmsm97Io1Mo2yUPF6VnOZFkw1RMoopKLKAE_9gmGxyDFMwMcwN-Bx_ABXQWmOtAgAA)):
-
-<!-- prettier-ignore -->
-```svelte
-/// file: Stepper.svelte
-<svelte:options customElement="my-stepper" />
-
-<script>
-	function dispatch(type) {
-		+++$host()+++.dispatchEvent(new CustomEvent(type));
-	}
-</script>
-
-<button onclick={() => dispatch('decrement')}>decrement</button>
-<button onclick={() => dispatch('increment')}>increment</button>
-```
-
-<!-- prettier-ignore -->
-```svelte
-/// file: App.svelte
-<script>
-	import './Stepper.svelte';
-
-	let count = $state(0);
-</script>
-
-<my-stepper
-	ondecrement={() => count -= 1}
-	onincrement={() => count += 1}
-></my-stepper>
-
-<p>count: {count}</p>
-```
diff --git a/documentation/docs/07-misc/04-custom-elements.md b/documentation/docs/07-misc/04-custom-elements.md
index a8e0c81763..91c51a3be2 100644
--- a/documentation/docs/07-misc/04-custom-elements.md
+++ b/documentation/docs/07-misc/04-custom-elements.md
@@ -114,6 +114,42 @@ When constructing a custom element, you can tailor several aspects by defining `
 ...
 ```
 
+## `$host`
+
+When compiling a component as a custom element, the `$host` rune provides access to the host element, allowing you to (for example) dispatch custom events ([demo](/playground/untitled#H4sIAAAAAAAAE41Ry2rDMBD8FSECtqkTt1fHFpSSL-ix7sFRNkTEXglrnTYY_3uRlDgxTaEHIfYxs7szA9-rBizPPwZOZwM89wmecqxbF70as7InaMjltrWFR3mpkQDJ8pwXVnbKkKiwItUa3RGLVtk7gTHQXRDR2lXda4CY1D0SK9nCUk0QPyfrCovsRoNFe17aQOAwGncgO2gBqRzihJXiQrEs2csYOhQ-7HgKHaLIbpRhhBG-I2eD_8ciM4KnnOCbeE5dD2P6h0Dz0-Yi_arNhPLJXBtSGi2TvSXdbpqwdsXvjuYsC1veabvvUTog2ylrapKH2G2XsMFLS4uDthQnq2t1cwKkGOGLvYU5PvaQxLsxOkPmsm97Io1Mo2yUPF6VnOZFkw1RMoopKLKAE_9gmGxyDFMwMcwN-Bx_ABXQWmOtAgAA)):
+
+<!-- prettier-ignore -->
+```svelte
+/// file: Stepper.svelte
+<svelte:options customElement="my-stepper" />
+
+<script>
+	function dispatch(type) {
+		+++$host()+++.dispatchEvent(new CustomEvent(type));
+	}
+</script>
+
+<button onclick={() => dispatch('decrement')}>decrement</button>
+<button onclick={() => dispatch('increment')}>increment</button>
+```
+
+<!-- prettier-ignore -->
+```svelte
+/// file: App.svelte
+<script>
+	import './Stepper.svelte';
+
+	let count = $state(0);
+</script>
+
+<my-stepper
+	ondecrement={() => count -= 1}
+	onincrement={() => count += 1}
+></my-stepper>
+
+<p>count: {count}</p>
+```
+
 ## Caveats and limitations
 
 Custom elements can be a useful way to package components for consumption in a non-Svelte app, as they will work with vanilla HTML and JavaScript as well as [most frameworks](https://custom-elements-everywhere.com/). There are, however, some important differences to be aware of: