在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。這是正確的，因爲根據this,規則打包在@host中的規則比父頁面中的任何選擇器具有更高的特異性。

我的問題：

如果我從模板中的@host塊內刪除color: blue，文本顯示在黑色和綠色不是我期望的那樣。這是爲什麼？？？

Answer 1

我相信this plunker的工作原理是如何工作的。基本上，CSS僞元素必須直接應用於自定義元素（在本例中爲my-custom-element）。我切換id="host"它（而不是其父母div）和代碼的工作。

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

注： @host may change壓倒一切的性質。一些（包括我自己）認爲它應該更多地提供默認的回退式樣。在這種情況下，主機文檔中的規則將覆蓋@host規則而不是其他方式。