:host getting oveerirden by universal selector css

Question

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

Answer 1

As we expect :host to have more specificity over universal selector strangely this is not the case. universal selector styles are overriding our :hoststyles

It's a wrong asumption. Actually, any CSS selector defined in the containing document will override the :host CSS rules.

According to Google's Shadow DOM presentation:

Outside styles always win over styles defined in shadow DOM. For example, if the user writes the selector fancy-tabs { width: 500px; }, it will trump the component's rule: :host { width: 650px;}

As a workaround, use !important combined with :host if you need.