From bd0403e739e08c564122dcb5f459d92365618be9 Mon Sep 17 00:00:00 2001 From: Github11200 Date: Fri, 29 Aug 2025 13:14:50 -0700 Subject: [PATCH] moved the rune reference further up --- documentation/docs/07-misc/04-custom-elements.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/documentation/docs/07-misc/04-custom-elements.md b/documentation/docs/07-misc/04-custom-elements.md index deb1c4d8bf..1b5143c0b7 100644 --- a/documentation/docs/07-misc/04-custom-elements.md +++ b/documentation/docs/07-misc/04-custom-elements.md @@ -4,7 +4,7 @@ title: Custom elements -Svelte components can also be compiled to custom elements (aka web components) using the `customElement: true` compiler option. You should specify a tag name for the component using the `` [element](svelte-options). +Svelte components can also be compiled to custom elements (aka web components) using the `customElement: true` compiler option. You should specify a tag name for the component using the `` [element](svelte-options). Within the custom element you can also access the host element and do things such as dispatching events using the [\$host](https://svelte.dev/docs/svelte/$host) rune. ```svelte @@ -128,4 +128,3 @@ Custom elements can be a useful way to package components for consumption in a n - Polyfills are required to support older browsers - You can use Svelte's context feature between regular Svelte components within a custom element, but you can't use them across custom elements. In other words, you can't use `setContext` on a parent custom element and read that with `getContext` in a child custom element. - Don't declare properties or attributes starting with `on`, as their usage will be interpreted as an event listener. In other words, Svelte treats `` as `customElement.addEventListener('eworld', true)` (and not as `customElement.oneworld = true`) -- If you would like to dispatch custom events or just access the host element then you can use the [\$host](https://svelte.dev/docs/svelte/$host) rune.