将 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, and 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.

将 React 渲染到 Shadow Root

Render React into Shadow Root

shadow-dom

reactjs