better docs

9 months ago · cea622af8b
parent a0b2c011de
commit cea622af8b
1 changed files with 13 additions and 2 deletions
--- a/documentation/docs/05-special-elements/04-svelte-html.md
+++ b/documentation/docs/05-special-elements/04-svelte-html.md
@ -6,6 +6,17 @@ title: <svelte:html>
 <svelte:html attribute={value} onevent={handler} />
 ```

-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.
+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.

-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.
+```svelte
+<!--- file: +layout.svelte --->
+<script>
+    let { data } = $props();
+</script>
+
+<svelte:html lang={data.lang}></svelte:html>
+```
+
+> [!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.
+
+This element may only appear the top level of your component and must never be inside a block or element.