{@html ...}

コンポーネントに生の HTML を挿入するには、{@html ...} タグを使用します。

<article>
	{@html content}
</article>

渡された文字列をエスケープするか、XSS 攻撃を防ぐために、自分で制御している値のみで埋めるようにしてください。サニタイズされていないコンテンツをレンダリングしないでください。

式は有効なスタンドアロン HTML である必要があります。</div> は有効な HTML ではないため、これは機能しません。

{@html '<div>'}content{@html '</div>'}

Svelte コードもコンパイルされなくなります。

スタイル

このようにレンダリングされたコンテンツは Svelte から「見えない」ため、スコープ付きスタイル を受け取りません。つまり、これは機能せず、a と img のスタイルは未使用と見なされます。

<article>
	{@html content}
</article>

<style>
	article {
		a { color: hotpink }
		img { width: 100% }
	}
</style>

代わりに、:global 修飾子を使用して、<article> 内のすべてをターゲットにします。

<style>
	article :global {
		a { color: hotpink }
		img { width: 100% }
	}
</style>