Skip to main content

Part 3 / Special elements / <svelte:document>

Similar to <svelte:window>, 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 selectionchange handler to the <svelte:document> tag:

App.svelte
<svelte:document on:selectionchange={handleSelectionChange} />

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

Next: <svelte:body>

1
2
3
4
5
6
7
8
9
10
11
<script>
	let selection = '';
 
	const handleSelectionChange = (e) => selection = document.getSelection();
</script>
 
<svelte:body />
 
<p>Select this text to fire events</p>
<p>Selection: {selection}</p>
initialising