javascript - :host getting oveerirden by universal selector css

Question

我们在一个通用样式文件中重置了 CSS (margin:0px;padding:0px;)，我们将其作为一个组件编写，并作为我们正在开发的其他组件的一部分包含在内。

我们正在使用像下面这样的通用选择器

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

}

在我们的每个组件上，我们都有一个 :host 样式，我们试图用它覆盖此颜色

:host{
color:yellow
}

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

我们只想从组件 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

As we expect :host to have more specificity over universal selector strangely this is not the case. universal selector styles are overriding our :hoststyles

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

根据谷歌的 Shadow DOM presentation :

Outside styles always win over styles defined in shadow DOM. For example, if the user writes the selector fancy-tabs { width: 500px; }, it will trump the component's rule: :host { width: 650px;}

作为解决方法，如果需要，请将 !important 与 :host 结合使用。