：主机被通用 CSS 选择器覆盖

Question

我们在一个通用样式文件中进行了 CSS 重置

(margin:0px;padding:0px;)

，我们将其作为一个组件编写，并作为我们正在开发的其他组件的一部分包含在内。

我们使用如下通用选择器

*,*:before,*:after{
color:pink

}

在我们的每个组件上，我们都有一个

:host

样式，我们试图用它来覆盖这个颜色

:host{
color:yellow
}

正如我们期望

:host

比通用选择器具有更多特异性一样，奇怪的是事实并非如此。通用选择器样式正在覆盖我们的

:host

样式

我们只想要组件 z-foo 的 MAKE ME GREEN 样式（在附加的 plnkr 示例中）

尝试了多种方法，似乎都不起作用

http://plnkr.co/edit/l8NSJT?p=preview

它是粉红色的，这意味着它仍然被通用选择器覆盖

        <!-- import polymer-element -->
        <link rel="import" href="https://polygit.org/polymer+:2.0-preview/webcomponentsjs+:v1/shadydom+webcomponents+:master/shadycss+webcomponents+:master/custom-elements+webcomponents+:master/components/polymer/polymer-element.html">

        <dom-module id='z-foo'>
          <template>
            MAKE ME GREEN
            <!-- Encapsulated, element-level stylesheet -->
            <style>
            :host{
              color:green;
            }
              </style>
              <div>

                I'm z-foo and i am green.

                </div>
          </template>
          <script>
            class ZFoo extends Polymer.Element {
              static get is() {
                return "z-foo";
              }
            }
            customElements.define(ZFoo.is, ZFoo);
          </script>
        </dom-module>

Answer 1

正如我们期望

:host

比通用选择器具有更多特异性一样，奇怪的是事实并非如此。通用选择器样式正在覆盖我们的 :hoststyles

这是一个错误的假设。实际上，包含文档中定义的任何 CSS 选择器都会覆盖

:host

CSS 规则。

根据 Google 的 Shadow DOM 演示：

外部样式总是胜过 Shadow DOM 中定义的样式。例如，如果用户编写选择器

fancy-tabs { width: 500px; }

，它将超越组件的规则：

:host { width: 650px;}

作为解决方法，如果需要，可将

!important

与

:host

结合使用。