<svelte:head>要素を使用すると、ドキュメントの<head>内に要素を挿入できます。これは、優れたSEOに不可欠な<title>や<meta>タグなどの場合に便利です。
これらはこのチュートリアルの文脈で示すのが非常に難しいため、別の目的、つまりスタイルシートの読み込みに使用します。
App
<script>
const themes = ['margaritaville', 'retrowave', 'spaaaaace', 'halloween'];
let selected = $state(themes[0]);
</script>
<svelte:head>
<link rel="stylesheet" href="/tutorial/stylesheets/{selected}.css" />
</svelte:head>
<h1>Welcome to my site!</h1>サーバーサイドレンダリング(SSR)モードでは、
<svelte:head>の内容は、残りのHTMLとは別に返されます。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
const themes = ['margaritaville', 'retrowave', 'spaaaaace', 'halloween'];
let selected = $state(themes[0]);
</script>
<h1>Welcome to my site!</h1>
<select bind:value={selected}><option disabled>choose a theme</option>
{#each themes as theme} <option>{theme}</option> {/each}</select>