[webcomponents] Making the shadow root an Element

Right now, the shadow root inside a component isn't an element, so it
can't host styles, etc.  This makes a few things weird, though.

For example, it means that it's non-trivial to get at the style of
text nodes directly inside the shadow.  Normally you can just look at
the parentNode of a text node, but here you have to actually look at
the host element.  And if the host element has blocked inheritance,
you can't even do that - you have to calculate the initial value for
yourself, because there's nothing you can actually *ask* for the style
information.

For another example, it means that you can't do any
inheritance-blocking yourself, without inserting an additional
wrapper.  If you let author inheritance through, but you want to block
specific properties, you'd want to set "property-in-question:
default;" at the "root" of the shadow, so it'll reset to its normal
value.  Alternately, if we implement inheritance-blocking with CSS's
new 'all' property
<http://dev.w3.org/csswg/css3-cascade/#all-shorthand>, we need to set
it on some "root", but that doesn't yet exist.

I propose that we reify the shadow root into an element, but default
it to "display: contents;"
<http://dev.w3.org/csswg/css-display-3/#the-display-box> in the UA
stylesheet. That way it has no layout effect by default, but provides
a handy element for doing all the things I've talked about in this
email.

I haven't thought through all the implications so far, though, like
what the element name is, if it can have attributes set on it, etc.

Thoughts?

~TJ

Received on Monday, 11 February 2013 23:50:26 UTC