javascript - 使用组件内 <style> 标签(未使用的 CSS 选择器)为 Svelte 组件的 {@html...} 标签设置样式

Question

我正在尝试向在 Svelte 组件的 {@hml...} 标记内呈现的 HTML 标记添加一些样式，但它似乎只继承了父项的样式({@html 的容器)。 ..} 标签)。此外，未使用的 CSS 选择器错误弹出显示我的 Svelte {@html...} 标签内特定 HTML 标签的样式选择器根本不起作用。 Svelte 是以这种方式构建的吗？是否有一种方法可以在 Svelte {@html...} 标签内设置标签样式？

我已经尝试了官方 Svelte 教程中提供的步骤，但它们并没有清楚地展示如何去做。

<style>
    p{
        color: red;
    }
    h1{
        color: blue;
    }
</style>

<script>
    let string = "<h1>what</h1>";   
</script>

<p>{@html string}</p>
<p>no</p>

我希望 h1 标签是蓝色的，而不是继承 p 标签的红色

Answer 1

您需要使用 :global(...)修饰符。如果你这样做...

:global(h1) { color: blue }

...它将适用于所有 <h1>页面上的元素——{@html ...} 中的元素标记和其他组件中存在的任何标记。

要将其限制为该组件内的元素，请将选择器放在本地选择器内:

p :global(h1) { color: blue }

该选择器仅适用于 <h1>里面的元素<p>属于这个组件的元素。 Here's a demo