将 React 渲染到 Shadow Root答案

【问题标题】：Render React into Shadow Root将 React 渲染到 Shadow Root
【发布时间】：2017-09-01 21:11:42
【问题描述】：

我正在尝试将 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 问题还是我做错了什么。

任何帮助将不胜感激！

【问题讨论】：

标签： reactjs shadow-dom

【解决方案1】：

这是一个已知的反应问题。

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

问题是 React 在文档上有一个全局事件处理程序并且影子 DOM 重新定位事件以使其看起来像它来了从主机节点。这可以防止 React 将事件传递给正确的元素。

【讨论】：

至少对总结这些链接的内容可能有用。如果这些链接失效了，这个答案就变得很多没那么有用了
完全同意 - 我一拿到我的电脑就会这样做。
@Amid 感谢您的链接！那么有没有办法使用影子根来反应？对吗？
不是任何“规范”方式，因为其中一个链接显示 facebook 也没有实施它的计划。有像github.com/Wildhoney/ReactShadow 这样的项目，但我没有使用它们的经验。
如果您将 React 应用程序直接渲染到影子根中，而不是其中的某个子节点，事件将起作用。