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中的规则具有比父页面中任何选择器更高的特异性。

我的问题：

如果我从模板中的color: blue块内删除@host，则文字显示为黑色而非绿色，如我所料。为什么??? ???

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规则，而不是相反。

在Polymer.js中使用伪元素

1 个答案: