reactjs - 将 React 渲染到 Shadow Root 中

Question

我正在尝试将React组件封装在Shadow Root中。组件渲染没有问题，但事件不起作用。我的代码如下所示:

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


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

React的版本是15.4.2。我浏览了问题列表，但无法理解这是 React 问题还是我做错了什么。

任何帮助将不胜感激!

Answer 1

这是一个已知的 react 问题。

有很多讨论( here 、 here 、 here 和 here )提到了这个问题，下面是其中一个的摘录:

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.