{@html ...}

要将原始 HTML 注入组件，请使用 {@html ...} 标记：

¥To inject raw HTML into your component, use the {@html ...} tag:

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

确保你转义传递的字符串或仅使用你控制的值填充它以防止 XSS 攻击。永远不要渲染未清理的内容。

¥[!NOTE] Make sure that you either escape the passed string or only populate it with values that are under your control in order to prevent XSS attacks. Never render unsanitized content.

表达式应该是有效的独立 HTML — 这不起作用，因为 </div> 不是有效的 HTML：

¥The expression should be valid standalone HTML — this will not work, because </div> is not valid HTML:

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

它也不会编译 Svelte 代码。

¥It also will not compile Svelte code.

样式(Styling)

¥Styling

以这种方式渲染的内容对 Svelte 来说是 ‘invisible’，因此不会接收 作用域样式 — 换句话说，这将不起作用，并且 a 和 img 样式将被视为未使用：

¥Content rendered this way is ‘invisible’ to Svelte and as such will not receive scoped styles — in other words, this will not work, and the a and img styles will be regarded as unused:

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

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

相反，使用 :global 修饰符来定位 <article> 内的所有内容：

¥Instead, use the :global modifier to target everything inside the <article>:

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