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

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

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Mon, 1 Dec 2014 15:06:51 -0800
Message-ID: <CAAWBYDARFozsxKxdEPZYFEB_LLS_3NUPNXmDP8V5m0VN4SVSTg@mail.gmail.com>
To: Philip Walton <philip@philipwalton.com>
Cc: www-style list <www-style@w3.org>
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

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:49 UTC