`<dialog>` close on click outside Svelte action

App.svelte

<script lang="ts">
	const click_outside = (node: HTMLDialogElement) => {
		const onclick = (event: MouseEvent) => {
			if (event.target === null || !(event.target instanceof Element)) {
				return;
			}
			if (event.target.tagName !== 'DIALOG') {
				//This prevents issues with forms
				return;
			}

			const rect = event.target.getBoundingClientRect();

			const clickedInDialog =
				rect.top <= event.clientY &&
				event.clientY <= rect.top + rect.height &&
				rect.left <= event.clientX &&
				event.clientX <= rect.left + rect.width;

			if (clickedInDialog === false) {
				node.close();
			}
		};

		document.addEventListener('click', onclick);

		return {
			destroy: () => {
				document.removeEventListener('click', onclick);
			},
		};
	};
</script>

<dialog use:click_outside>
  <!-- ... -->
</dialog>