<svelte:head> 要素を使うと、ドキュメントの <head> 内に要素を挿入することができます。これは SEO を良くするのに不可欠な <title> タグや <meta> タグなどに有用です。
このチュートリアルで、その用途の使用例を示すのは難しいので、別の用途で使ってみましょう — スタイルシートを読み込みます。
App.svelte
<script>
const themes = ['margaritaville', 'retrowave', 'spaaaaace', 'halloween'];
let selected = themes[0];
</script>
<svelte:head>
<link rel="stylesheet" href="/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
<script>
const themes = ['margaritaville', 'retrowave', 'spaaaaace', 'halloween'];
let selected = 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>