使用组件内 <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

这可能是一个错误（但 Svelte 似乎很难知道该字符串中可能存在什么）。

作为（丑陋的）解决方法，您可以选择内联指定所需的样式。例如，

<script>
    let string = `<h1 style="color:blue;">what</h1>`;   
</script>

编辑：Svelte creator 已经回答了官方使用 :global.

的方式

Answer 2

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

:global(h1) { color: blue }

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

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

p :global(h1) { color: blue }

该选择器将仅应用于属于该组件的 <p> 个元素内的 <h1> 个元素。 Here's a demo

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

Styling a {@html...} tag of a Svelte component by ising the in-component <style> tag (Unused CSS selector)

javascript

css

svelte