We have CSS resets (margin:0px;padding:0px;) in a common style file which we have authored as one component and have included as a part of other components which we are developing.
We are using universal selectors like below
*,*:before,*:after{
color:pink
}
On each of our component we have a :host style with which we are trying to override this color
:host{
color:yellow
}
As we expect :host to have more specificity over universal selector strangely this is not the case. universal selector styles are overriding our :hoststyles
We just want MAKE ME GREEN styled from component z-foo (in the attached plnkr example)
Tried multiple approaches and nothing seems to work
http://plnkr.co/edit/l8NSJT?p=preview
Its pink which means its still gets overridden by universal selector
<!-- import polymer-element -->
<link rel="import" href="https://polygit.org/polymer+:2.0-preview/webcomponentsjs+:v1/shadydom+webcomponents+:master/shadycss+webcomponents+:master/custom-elements+webcomponents+:master/components/polymer/polymer-element.html">
<dom-module id='z-foo'>
<template>
MAKE ME GREEN
<!-- Encapsulated, element-level stylesheet -->
<style>
:host{
color:green;
}
</style>
<div>
I'm z-foo and i am green.
</div>
</template>
<script>
class ZFoo extends Polymer.Element {
static get is() {
return "z-foo";
}
}
customElements.define(ZFoo.is, ZFoo);
</script>
</dom-module>
