はじめに
SvelteKitにはいくつか特殊なHTML要素が用意されています。
今回はその中でも<svelte:window> <svelte:head> <svelte:body>に焦点をあてて解説したいと思います。
<svelte:window>
<button>タグにon:clickなどのイベントリスナーを追加できるように、
windowに対してもイベントリスナーを追加することができます。
例えばkeydownリスナーを追加し、押したkeyを表示してみます。
+page.svelte
<script lang="ts">
let key = '';
</script>
<svelte:window on:keydown={(event) => key = event.key}></svelte:window>
<h1>あなたが押したのは { key } ですね！</h1>
<svelte:head>
<svelte:head>を使うと、<head>内に要素を挿入することができます。
ページによってタイトルを変更してみます。
/hogehoge/+page.svelte
<svelte:head>
<title>hogehoge</title>
</svelte:head>
/fugafuga/+page.svelte
<svelte:head>
<title>fugafuga</title>
</svelte:head>
ちゃんと変わりましたね！
<svelte:body>
<svelte:body>も<svelte:window>と同じような使い方ができます。
bodyに対してイベントリスナーを設定したいときに便利です。
例えば、ダブルクリックをした時の処理を入れてみます。
<svelte:body on:dblclick={() => alert('ダブルクリックしましたね')}/>
ちゃんと表示されました。
このように特殊なエレメントも用意されているんですね～