:host 被通用選擇器 css 覆蓋

Question

我們在一個通用樣式文件中有 CSS 重置(margin:0px;padding:0px;) ，我們將其作為一個組件編寫，並作為我們正在開發的其他組件的一部分包含在內。

我們正在使用如下的通用選擇器

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

}

在我們的每個組件上，我們都有一個:host樣式，我們試圖用它來覆蓋這個顏色

:host{
color:yellow
}

正如我們所期望的:host對通用選擇器有更多的特異性，但奇怪的是事實並非如此。 通用選擇器 styles 覆蓋我們的:host styles

我們只想要從組件 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對通用選擇器有更多的特異性，但奇怪的是事實並非如此。 通用選擇器 styles 覆蓋我們的：hoststyles

這是一個錯誤的假設。 實際上，包含文檔中定義的任何 CSS 選擇器都將覆蓋:host CSS 規則。

根據 Google 的Shadow DOM 介紹：

在 styles 之外總是勝過 shadow DOM 中定義的 styles。 例如，如果用戶編寫選擇器fancy-tabs { width: 500px; } fancy-tabs { width: 500px; } ，它將勝過組件的規則： :host { width: 650px;}

作為一種解決方法，如果需要，請使用!important與:host結合使用。