Render React into Shadow Root

Question

I am trying to encapsulate React Component in Shadow Root. The component is rendered without a problem, but events are not working. My code looks like this:

let shadow = document.getElementById('root').attachShadow({mode: 'open'});
shadow.innerHTML = "<div id='panel'></div>";


ReactDOM.render(
    <Admin />,
    shadow.getElementById('panel')
);

The version of React is 15.4.2. I went through the list of issues and can't understand if this is a React issue or I am doing something wrong.

Any help will be appreciated!

Answer 1

This is a known react issue.

There are number of discussions (here, here, here, and here) that refer to this issue, below is an excerpt from one of them:

The problem is that React has a global event handler on the document and the shadow DOM retargets the event to make it look like it came from the host node. This prevents React from passing the event to the right element.