在Polymer.js中使用偽元素

Question

我正在使用Polymer.js邁出第一步，並且正在努力創建一個偽元素。

這是我嘗試的：

在我的主機文檔中：

<style type="text/css">
  #host::x-a-cool-test {
    color: green;
  }
</style>

<div id="host">
  <my-custom-element></my-custom-element>
</div>

在我的自定義元素中：

<element name="my-custom-element">
  <template>
    <style>
      @host {
        * { display: block; color: blue; }
      }          
     </style>
     <div id="group" pseudo="x-a-cool-test">
        just some text
     </div>
  </template>
  <script>
    Polymer.register(this);
  </script>
</element>

那只會以藍色顯示just my text 。 這是正確的，因為根據這個 ， 包裹在一個規則@host比父頁面中的任何選擇較高的特異性 。

我的問題 ：

如果刪除模板中@host塊內的color: blue ，則文本顯示為黑色，而不是我期望的綠色。 這是為什么？？？

Answer 1

我相信這台塞子可以按您的意願工作。 基本上，必須將CSS偽元素直接應用於自定義元素（在本例中為my-custom-element ）。 我將id="host"切換為它（而不是其父div ），並且代碼起作用了。

<div>
  <my-custom-element id="host"></my-custom-element>
</div>

注意： @host的壓倒性可能會改變 。 有些人（包括我自己）認為應該提供更多默認的后備樣式。 在這種情況下，宿主文檔中的規則將覆蓋@host規則，而不是相反。