Skip to main content

Part 1 / Introduction / HTML tags

通常、文字列はプレーンテキストとして挿入され、<>のような文字は特別な意味を持ちません。

しかし、HTMLをコンポーネントに直接レンダリングする必要がある場合もあります。例えば、あなたが今読んでいる文章はマークダウンファイルに存在し、HTMLのblobとしてこのページに含まれています。

Svelteでは、{@html ...} という特別なタグを使ってこれを行います。

App.svelte
<p>{@html string}</p>

Warning! Svelte は DOM に挿入される前に {@html ...} 内の式のサニタイズを行いません。言い換えると、この機能を使用する場合は信頼できないソースから来た HTML を手動でエスケープすることが重要です、そうしないとユーザーをCross-Site Scripting (XSS) 攻撃にさらす危険性があります。

Next: Reactivity

1
2
3
4
5
6
<script>
	let string = `this string contains some <strong>HTML!!!</strong>`;
</script>
 
<p>{string}</p>
 
initialising