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>