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

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.

Received on Saturday, 29 November 2014 01:35:52 UTC