Skip to main content

{@html ...}

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

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

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

为了防止 XSS attacks 错误,请确保对传递的字符串进行转义,或者只使用你可控制的值填充它。切勿渲染未经处理的内容。

表达式应该是有效的独立 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’,因此不会接收 作用域样式 — 换句话说,这将不起作用,并且 aimg 样式将被视为未使用:

¥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>
上一页 下一页