The .shadowRoot property and WebComponents

Related to the ongoing discussion about whether to expose the shadow
tree of web components by default or not, but somewhat orthogonal to
it, I think there is a question of *how* to expose the web component
shadow tree.

If I understand things correct, the .shadowRoot property and the
createShadowRoot function behaves very different on elements that have
a shadow tree attached through the use of WebComponents, compared to
if it doesn't.

With an element with no attached web component, a page can rely on the
fact that it can use .createShadowRoot in order to attach its own
custom shadow root to an element. And it can rely on that the
.shadowRoot property is null if it hasn't called .createShadowRoot and
returns the shadow root created using createShadowRoot otherwise.

But if a webcomponent has attached a shadow tree, then the .shadowRoot
and createShadowRoot API suddenly behaves differently.

I think there's value in enabling authors to always use .shadowRoot
and createShadowRoot in order to attach a "page level" shadow tree to
an element, and that that should work independently of if a web
component also has attached a shadow tree.

If there's shadow tree attached using both createShadowRoot and using
web components, then the two extend each other using the <shadow>
element the same way that multiple shadow trees attached using web
components do.

So for the cases when a web component chooses to expose its shadow
tree, it should do so using some other API than .shadowRoot.

Another way to look at it is that for a web component that chooses
*not* to expose its shadow tree, the .shadowRoot property should still
be useable and show no signs of there being a shadow tree attached
through WebComponents.

/ Jonas

Received on Friday, 8 March 2013 21:14:36 UTC