Skip to content

Commit cea622a

Browse files
committed
better docs
1 parent a0b2c01 commit cea622a

File tree

1 file changed

+13
-2
lines changed

1 file changed

+13
-2
lines changed

documentation/docs/05-special-elements/04-svelte-html.md

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,17 @@ title: <svelte:html>
66
<svelte:html attribute={value} onevent={handler} />
77
```
88

9-
Similarly to `<svelte:body>`, this element allows you to add properties and listeners to events on `document.documentElement`. This is useful for attributes such as `lang` which influence how the browser interprets the content.
9+
This element allows you to add attributes and event listeners to the `<html>` root (i.e. `document.documentElement`). This is useful for attributes such as `lang` which influence how the browser interprets the content.
1010

11-
As with `<svelte:window>`, `<svelte:document>` and `<svelte:body>`, this element may only appear the top level of your component and must never be inside a block or element.
11+
```svelte
12+
<!--- file: +layout.svelte --->
13+
<script>
14+
let { data } = $props();
15+
</script>
16+
17+
<svelte:html lang={data.lang}></svelte:html>
18+
```
19+
20+
> [!NOTE] If you use SvelteKit version 2.13 or higher (and have `%svelte.htmlAttributes%` on the `<html>` tag in `app.html`), the attributes will automatically be server rendered and hydrated correctly. If you're using a custom server rendering setup, you can retrieve the server-rendered attributes string via `htmlAttributes` from the `render` method response and inject it into your HTML manually.
21+
22+
This element may only appear the top level of your component and must never be inside a block or element.

0 commit comments

Comments
 (0)