1

我正在使用 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为蓝色。这是正确的，因为根据这一点，包裹在 a 中的规则@host比父页面中的任何选择器具有更高的特异性。

我的问题：

color: blue如果我从模板中的块内部删除@host，则文本显示为黑色，而不是我所期望的绿色。这是为什么？？？

4

1 回答 1

2

我相信这个 plunker会按照您的意愿工作。基本上，CSS 伪元素必须直接应用于自定义元素（在本例中为my-custom-element）。我切换id="host"到它（而不是它的 parent div）并且代码有效。

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

注意： @host 的压倒一切性质可能会改变。一些人（包括我自己）认为它应该更多地用于提供默认的后备样式。在这种情况下，主机文档中的规则将覆盖 @host 规则，而不是相反。

于 2013-06-24T19:45:01.367 回答