Svelte 中的全局仅后代样式

Question

Svelte 中有没有办法添加仅影响当前组件和任何后代组件的样式？

Svelte 支持原生 :global() 选择器包装器，它将在全局范围内为该选择器声明样式，但我正在寻找类似的东西，它只匹配当前或任何后代组件中的选择器。

例如 (REPL):

App.svelte

<script>
    import C1 from './C1.svelte';
    let name = 'world';
</script>

<div><C1>Hello {name}!</C1></div>

C1.svelte

<script>
    import C2 from './C2.svelte';
    let name = 'world';
</script>

<style>
    :global(div) {
        padding: 10px;
        background-color: blue;
    }
    div {
        background-color: red;
    }
</style>

<div><C2><slot /></C2></div>

C2.svelte

<div><slot /></div>

在上面的示例中，所有三个组件都从中间的子组件 C1.svelte 接收全局样式。我正在寻找一种方法来执行某种混合样式（不将样式传递给子组件）以添加仅影响组件树中向下组件的“全局向下”样式。

当不使用 :global() 选择器包装器时，匹配的节点将被分配一个唯一的 class ，然后选择器将其作为目标，并在编译期间添加到选择器中。我是 asking/suggesting 会是这样的：

:find(div) {
  background-color: blue;
}

…其中 :find() 类似地为在相同或降序组件中匹配的任何 HTML 元素分配一个唯一的 class。这可能吗？

Answer 1

通过将 :global() 与范围选择器结合使用，您可以将样式范围限定为子组件。例如，以下选择器将应用于作为此组件中 div 后代的任何组件中的所有 div。

<style>
    div :global(div) {
        padding: 10px;
        background-color: blue;
    }
</style>

选择器转换成这样：

div.svelte-hash div { /* etc */ }

如果您还想在此组件中同时定位 top-level div，您可以这样编写规则（尽管这可能具有 CSS 特异性含义）：

<style>
    div, div :global(div) {
        padding: 10px;
        background-color: blue;
    }
</style>

Svelte 中的全局仅后代样式

Global Descendant-Only Styles in Svelte

javascript

css

svelte

svelte-3

svelte-component