W3C home > Mailing lists > Public > www-style@w3.org > April 2015

Re: :host pseudo-class

From: Daniel Tan <lists@novalistic.com>
Date: Sun, 26 Apr 2015 02:59:45 +0800
Message-ID: <553BE421.9070100@novalistic.com>
To: Anne van Kesteren <annevk@annevk.nl>, "www-style@w3.org" <www-style@w3.org>, "L. David Baron" <dbaron@dbaron.org>
CC: WebApps WG <public-webapps@w3.org>
On 4/26/2015 12:32 AM, Anne van Kesteren wrote:
> I don't understand why :host is a pseudo-class rather than a
> pseudo-element. My mental model of a pseudo-class is that it allows
> you to match an element based on a boolean internal slot of that
> element. :host is not that since e.g. * does not match :host as I
> understand it. That seems super weird. Why not just use ::host?
> Copying WebApps since this affects everyone caring about Shadow DOM.

My guess is it's because a shadow host element is an element, not a

The reason * doesn't match :host is because the host element, in the
context of its shadow tree, is featureless, as mentioned in [1]section
3.1.1 of css-scoping and [2]section 3.3 of selectors-4.

Does the following note in css-scoping 3.1.1 answer your question?

> Why is the shadow host so weird?
> The shadow host lives outside the shadow tree, and its markup is in
> control of the page author, not the component author.
> It would not be very good if a component used a particular class name
> internally in a shadow tree, and the page author using the component
> accidentally also used the the same class name and put it on the host
> element. Such a situation would result in accidental styling that is
> impossible for the component author to predict, and confusing for the
> page author to debug.
> However, there are still some reasonable use-cases for letting a
> stylesheet in a shadow tree style its host element. So, to allow this
> situation but prevent accidental styling, the host element appears
> but is completely featureless and unselectable except through :host.

[1]: http://dev.w3.org/csswg/css-scoping-1/#host-element-in-tree
[2]: http://dev.w3.org/csswg/selectors-4/#data-model

Daniel Tan
Received on Saturday, 25 April 2015 19:00:13 UTC

This archive was generated by hypermail 2.4.0 : Monday, 23 January 2023 02:14:50 UTC