Polymer 1.4.0 到 1.7.0，全局 :root 样式不再起作用

Question

我有一些样式可以应用于任何地方，包括内部组件。它们的定义如下：

<style id="base-css" is="custom-style">
    :root .primary { 
        color: red; 
    }
</style>

结果是，例如，如果我在任何地方都有 <span class="primary">，无论 Polymer 组件内部有多深，它都会始终适用。事实上，检查这个 span 表明样式被重写为：

:not([style-scope]):not(.style-scope):root .primary { 
    color: red;
}

---

自从我将 Polymer 更新到 1.7.0 后，这不再有效。以这种方式定义的样式不再渗透到组件中，而只能在它们之外工作。将带有 .primary 的 span 添加到 body 并检查它表明样式现在被重写为：

html .primary:not([style-scope]):not(.style-scope) { 
    color: red;
}

当然，这在组件内部是行不通的，因为所有内部元素都有.style-scope。

我阅读了 1.7.0 版本说明，并尝试将 :root 替换为 html，结果完全相同。

有没有人知道我怎样才能让它再次工作？

谢谢。

Answer 1

使用 CSS 自定义属性创建样式挂钩

如果您使用 CSS 自定义属性提供样式挂钩，则可以调整内部样式。您可以在可以从主页覆盖的元素内创建“样式占位符”。

主页内：

<style>
  base-css {
    --primary: red;
  }
</style>

元素内部：

    <style>
        :host([background]) {
          // Use --primary is not define, use #9E9E9E 
          background: var(--primary, #9E9E9E);
        }
    </style>

文档

Using CSS variables

Shadow DOM v1: Self-Contained Web Components