在Polymer.js中使用伪元素 [英] Use of Pseudo-Elements in Polymer.js

问题描述

这是我试过的：

我试着用Polymer.js做我的第一步，我在努力创建一个伪元素。 p>

在我的主机文档中：

  ; 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;颜色：蓝色; } 
} 
< / style> 
< div id =grouppseudo =x-a-cool-test> 
只是一些文本
< / div> 
< / template> 
< script> 
 Polymer.register（this）; 
< / script> 
< / element> 
  

这将显示只是我的文字 。这是正确的，因为根据这，规则包装> 我的问题：

如果我从中删除​​ color：blue @host 阻止在我的模板，文本显示为黑色，而不是我期望的绿色。为什么是

解决方案

我相信这个plunker 工作原理如何你想要它。基本上，CSS伪元素必须直接应用于自定义元素（在本例中为 my-custom-element ）。我将 id =host切换到它（而不是其父 div ），代码工作。

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

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

I'm taking my first steps with Polymer.js, and I'm struggling with creating a pseudo-element.

This is what I tried:

In my host document:

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

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

In my custom element:

<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>

That will show just my text in blue. That is correct, because according to this, rules wrapped in a @host have higher specificity than any selector in the parent page.

My question:

If I delete color: blue from inside the @host block in my template, the text is shown in black and NOT green as I would expect. Why is that???

解决方案

I believe this plunker works how you want it to. Basically, the CSS pseudo-element has to be applied directly to the custom element (in this case the my-custom-element). I switched id="host" to it (instead of its parent div) and the code worked.

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

Note: The overriding nature of @host may change. Some (myself included) think it should be more for providing default, fallback styles. In this case rules in the host document will override @host rules instead of the other way around.

这篇关于在Polymer.js中使用伪元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！