通过组件内 <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>元素。这是一个演示