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>
