Allow rendering into a document fragment

[wereHamster]

Shadow roots have nodeType == DOCUMENT_FRAGMENT_NODE. When trying to render into one, react throws an error:

Exception caught during observer callback:
  Error: Invariant Violation: _registerComponent(...):
    Target container is not a DOM element.

There is an explicit check to only allow rendering into ELEMENT_NODE_TYPE and DOC_NODE_TYPE. Is there any particular reason why document fragments are excluded there?

[zpao]

I don't have much experience with document fragments so I'm going to guess:

1. it was never a use case we tested
2. there might be some other part that falls over if we render into a fragment

Not sure if either is actually true though. If you're interested, it sounds like you have a the experience that would help us figure out if it was intentional or if we can make it work. Let me know and we can help you out.

[sebmarkbage]

We currently record an ID on the container to enable updates when a component is rerendered. Presumably you want to place the document fragment somewhere and that means it will switch container anyway. We think of the parent as updating the child so for updates to happen there needs to be container.

That makes this use case a little more complicated. In theory we could support it. I'm curious about the use case. How are you inserting this into the document?

[wereHamster]

I have an web app which uses polymer. I was investigating whether it's possible to use reactjs in parallel, to allow gradual transition from polymer to reactjs. I wanted to use reactjs to render the shadow dom of a single custom element. There is an easy workaround though: insert a blank element into the shadow dom and let reactjs render into that.

[vjeux]

This is a regression of React 0.4.0. It was working in React 0.3.2.

React 0.3.2 (works): http://jsfiddle.net/vjeux/t6qL9/
React 0.4.0 (throws): http://jsfiddle.net/vjeux/Yh95C/

[wereHamster]

React has bigger issues than that when its combined with Polymer. One seems to be because Polymer wraps all DOM elements and events in a wrapper (to polyfill deficiencies of the underlying browser), and that seems to throw React off. I had to explicitly unwrap the DOM element which is passed to React.renderComponent(). And event handlers aren't automatically attached, I had to do them manually in componentDidMount. See https://gist.github.com/wereHamster/b5f36db9e15558ada718.

[plievone]

And event handlers aren't automatically attached, I had to do them manually in componentDidMount.

Note also that global event listeners are normally attached to node.ownerDocument (from where events are propagated to event handlers internally), and as document fragments are not recognized, global event listeners may be bound directly to document fragments (as documents, even though they have ownerDocument) and lost. https://github.com/facebook/react/blob/e3e3b47/src/core/ReactDOMComponent.js#L70-L73

[wereHamster]

I figured out the problem with wrapped nodes. React creates a dummy node when the script is loaded. Because that did happen before polymer has been able to fully initialize itself, the dummy node was a browser native element. Later when react created DOM nodes through that dummy node, those elements were browser native as well, and polymer didn't like that. Now I load the reactjs script after 'WebComponentsReady' has been fired.

However, that only fixed one problem, the events still don't bind properly. I'll have a look where the handler is being registered. Thanks for the pointer.