<svelte:element>

<svelte:element this={expression} />

<svelte:element> 要素を使用すると、開発中には不明な要素 (例えば CMS から提供される要素) をレンダリングできます。プロパティやイベントリスナーを指定した場合は、その要素に適用されます。

Svelte の組み込みバインディングはジェネリックな要素には対応していないため、唯一サポートされているバインディングは bind:this です。

this に nullish な値が設定されている場合、その要素とその子要素はレンダリングされません。

this に void element（空要素） (例えば br) のタグ名が指定されており、<svelte:element> に子要素が含まれている場合、開発モードの場合は実行時エラーが発生します:

<script>
	let tag = $state('hr');
</script>

<svelte:element this={tag}>
	This text cannot appear inside an hr element
</svelte:element>

Svelte は可能な限り要素の周囲の状況から適切な名前空間を推測しようとしますが、常に正しく推測できるとは限りません。そのため、xmlns 属性を使用して明示的に指定することができます:

<svelte:element this={tag} xmlns="http://www.w3.org/2000/svg" />

this には有効な DOM 要素のタグを指定する必要があります。例えば #text や svelte:head などは使用できません。