Re: :host pseudo-class

I think using "::host" pseudo element can avoid this kind of
*controversial* discussion and we can get benefits from that.
+1 for "::host" pseudo element.

On Sun, Apr 26, 2015 at 4:02 AM Daniel Tan <lists@novalistic.com> wrote:

> 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>
>
>