Skip to main content
SvelteSpecial elements

<svelte:html>

<svelte:html attribute={value} onevent={handler} />

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.

+layout
<script>
	let { data } = $props();
</script>

<svelte:html lang={data.lang}></svelte:html>

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.

Edit this page on GitHub

previous next
<svelte:body>