Use of Pseudo-Elements in Polymer.js

问题

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

回答1:

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.

来源：https://stackoverflow.com/questions/17274179/use-of-pseudo-elements-in-polymer-js

标签

javascript

css

polymer