Question

我有一些适用于任何地方的样式，包括深层内部组件。他们的定义如下：

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

结果是，如果我在任何地方都有<span class="primary">，无论聚合物组件内部有多深，它总是适用。事实上，检查此跨度表明该样式被重写为：

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

由于我已将Polymer更新为1.7.0，因此不再有效。以这种方式定义的样式不再渗透到组件中，只能在它们之外工作。将.primary的范围添加到正文并检查它会显示该样式现在被重写为：

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

当然，它不会在组件内部工作，因为所有内部元素都有.style-scope。

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

有没有人知道如何才能让它再次发挥作用？

谢谢。

Answer 1

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

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

在主页内：

<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

Polymer 1.4.0到1.7.0，global：root样式不再有效

1 个答案: