Re: :host pseudo-class

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
pseudo-element.

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
NOVALISTIC
<http://NOVALISTIC.com>