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

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

> [!NOTE] 渡された文字列をエスケープするか、または自分がコントロールできる値でのみ埋めるようにして、[XSS 攻撃](https://owasp.org/www-community/attacks/xss/) を防止してください。サニタイズされていないコンテンツをレンダリングしてはいけません。

式は単体で有効な HTML である必要があります — 例えば、`</div>` は有効な HTML ではないため機能しません:

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

また、Svelte のコードをコンパイルすることもできません。

## Styling

この方法でレンダリングされたコンテンツは Svelte からは '見えない(invisible)' ため、[スコープ付きスタイル](scoped-styles) を適用することはできません — 言い換えると、次の例は機能せず、`a` と `img` のスタイルは未使用と見なされます:

<!-- prettier-ignore -->
```svelte
<article>
	{@html content}
</article>

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

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

<!-- prettier-ignore -->
```svelte
<style>
	article :global {
		a { color: hotpink }
		img { width: 100% }
	}
</style>
```