Re: [css-scoping] What is the specificity of :host, :host(), and :host-context()?

On Fri, Nov 28, 2014 at 5:35 PM, Philip Walton <philip@philipwalton.com> wrote:
> I've put together a demo (working in Chrome), and in each of the three
> examples, the text is red. It seems to me like it shouldn't be red, but
> perhaps I'm not clear on the specificity of the host and host-context
> selectors.
>
> http://jsbin.com/tacidonere/1/edit?html,output
>
> The gist of the demo is that given the following rule in the <head>
>
> * {
>   color: red;
> }
>
> And the following rule in a shadow root:
>
> :host {
>   color: blue;
> }
>
> It's surprising to me that the universal selector "wins". I was under the
> impression that pseudo-classes carried the same specificity as regular
> classes. Is there an exception inside shadow DOM?
>
> FWIW, I can see this being a pretty big problem since a lot of CSS resets
> use the universal selector, and in such cases the various :host selectors
> will be essentially useless or have to resort to !important.

The specificity is standard for pseudo-classes, but this case is
actually covered by something higher in the cascade.  Per
<http://dev.w3.org/csswg/css-scoping/#cascading>, rules from outside a
shadow tree always win against rules within a shadow tree, when they
attempt to style the same element.

The fact that styling the host element doesn't mix well with reset
stylesheets is just yet another entry in the long list of reasons why
reset stylesheets are the devil. ^_^

~TJ

Received on Monday, 1 December 2014 23:07:38 UTC