Add possibility to mount directly into shadowRoot

[rybon]

Instead of creating a span and mounting the React component in there, we could also just mount directly into the shadowRoot. According to this comment the event system of the latest version of React supports shadowRoot now, no retargeting needed. Retargeting is only required when mounting in a child of shadowRoot, so why not avoid the problem altogether by not using a child at all?

[rybon]

@rstacruz thoughts?

[yk-jemmic]

it would really help to pass an extra property to the react root component, which is a reference to the object returned by attachShadow({mode: 'closed' }).
So my problem is that we are trying to migrate from JSF to reactJs, there were two options either using iframe or with a web component that wraps ReactComponent, the second option is more preferable as it is then easier to update its custom attributes which then are converted to react props, but then we have a problem with css conflicts. So the best solution is to use const rootShadow = attachShadow({mode: 'closed'}) but as you know the rootShadow reference is available when calling the attachShadow method but I need that rootShadow to move specific css and also for example we use the MUI library, and according to their guide to make it properly work in the shadowDom we need a ref to it

PS. Also, I don't quite understand why one needs to create an extra <span> element when HTMLElement itself can be used as the root element for a reactComponent, or its rootShadow

[yk-jemmic]

@rstacruz could you pls review this path I've created to allow use shadowRoot
Return-ShadowRoot-as-mountPoint-if-shadow-is-true.diff.zip