I'm currently exploring the world of Polymer.js and I've encountered an issue with creating a pseudo-element that's been puzzling me.
This is what I attempted:
In my primary document:
<style type="text/css">
#host::x-a-cool-test {
color: green;
}
</style>
<div id="host">
<my-custom-element></my-custom-element>
</div>
Within 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>
This will display just my text in blue. This behavior aligns with the fact that, as mentioned on this resource, rules within a @host are more specific than any selector outside the shadow DOM.
Here lies my question:
If I remove color: blue from the @host section within my template, the text appears in black rather than green as expected. What could be causing this unexpected behavior?