Skip to main content

Part 3 / 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 selectionchange handler to the <svelte:document> tag:

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

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

Next: <svelte:head>

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