Rendering component into a shadow root in React 15.x

[Wildhoney]

In 0.14 it was quite easy to render a component into a shadow root — this was due to the nodeType check in ReactDOMComponent.

However you'll notice that in 15.0 that check has been completely removed and as such will always bind events to the #document element — the ownerDocument, rather than the #document-fragment.

As the events that cross the shadow boundary are retargeted to appear as though they're from the shadow host instead of the internals, React's event delegating fails to invoke the event function. In the case of 0.14 the event delegation on the #document-fragment correctly handled the event, as it was able to inspect the listenerBank before retargeting was performed — any further propagation of the event would have been unnecessary.

Now I realise React doesn't support Shadow DOM natively — however it seems as though we've taken a little step back, especially with Angular 2 and its Shadow DOM support on the horizon. I'm merely wondering as to the rationale behind the removal of the ownerDocument check, and whether we'd be happy to add it back in?

^{(For those people who dislike the CSS Module approach)}

[jimfb]

@Wildhoney Yes, we should probably add it back in. Without having looked into it deeply, my guess is that the breakage was just an oversight.

Would gladly accept a PR to fix this.

[Wildhoney]

Agreed — I'll take a look. Thanks 👍

One quick question, however — otherwise I'll investigate myself — what is the easiest way to obtain the container (in this case the #document-fragment) from inst?

[jimfb]

I'd look at nativeContainer and topLevelWrapper; the info might need to be added if it isn't already available. I think @spicyj wrote the nativeContainer code, so he might know. Otherwise, it'll require a bit of investigation.

[jimfb]

Fixed in #6462