{@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’,因此不会接收 作用域样式 — 换句话说,这将不起作用,并且 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>