W3C home > Mailing lists > Public > www-style@w3.org > November 2014

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

From: Philip Walton <philip@philipwalton.com>
Date: Fri, 28 Nov 2014 17:35:25 -0800
Message-ID: <CAGRhNhWe1BM=ADOZNNBGgAZQuTQ5W6y94D+KT3V8kxVxWJZtng@mail.gmail.com>
To: www-style list <www-style@w3.org>
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

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:39:26 UTC