Svelte模板語法

{@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>