Special elements / <svelte:document> • Svelte Tutorial

Advanced Svelte Special elements <svelte:document>

The <svelte:document> element allows you to listen for events that fire on document. This is useful with events like selectionchange, which doesn’t fire on window.

Add the onselectionchange handler to the <svelte:document> tag:

App

<svelte:document {onselectionchange} />

Avoid mouseenter and mouseleave handlers on this element, as these events are not fired on document in all browsers. Use <svelte:body> instead.

Edit this page on GitHub

previous next

<svelte:window> bindings <svelte:body>

<script>

	let selection = $state('');

	const onselectionchange = (e) => {

		selection = document.getSelection().toString();

};

</script>

<svelte:document />

<h1>Select this text to fire events</h1>

<p>Selection: {selection}</p>

show text show editor