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>