Skip to main content
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
1
2
3
4
5
6
7
8
9
10
11
12
13
<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>