本文へ移動
高度なSvelte 特殊要素 <svelte:element>

事前にどの要素をレンダリングする必要があるかわからない場合があります。長い{#if ...}ブロックのリストを持つ代わりに...

アプリ
{#if selected === 'h1'}
	<h1>I'm a <code>&lt;h1&gt;</code> element</h1>
{:else}
	<p>TODO others</p>
{/if}

...<svelte:element>を使用できます。

アプリ
<svelte:element this={selected}>
	I'm a <code>&lt;{selected}&gt;</code> element
</svelte:element>

this値は任意の文字列、または偽の値にすることができます。偽の値の場合、要素はレンダリングされません。

GitHubでこのページを編集する

前へ 次へ
<svelte:head>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script>
	const options = ['h1', 'h2', 'h3', 'p', 'marquee'];
	let selected = $state(options[0]);
</script>
 
<select bind:value={selected}>
	{#each options as option}
		<option value={option}>{option}</option>
	{/each}
</select>
 
{#if selected === 'h1'}
	<h1>I'm a <code>&lt;h1&gt;</code> element</h1>
{:else}
	<p>TODO others</p>
{/if}