在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规则而不是其他方式。