无法在已托管影子树的主机上创建影子根

Question

我正在 Shadow DOM 中渲染一个 React 应用程序（Widget）。所以我查看了当前加载小部件的 div id。

参见下面的屏幕显示。

有了这些信息，我想创建这样的 Shadow 主机。

const host = document.querySelector('#widget-_hw');
const shadow = host.attachShadow({ mode: 'open' });
const renderIn = document.createElement('div');

但我收到此错误。

Failed to execute 'attachShadow' on 'Element': Shadow root cannot be created on a host which already hosts a shadow tree

Answer 1

它表示您无法将影子文档附加到此元素，因为它已经附加了一个文档。

在您的代码中设置一个断点并检查它是否不会被调用两次。

或者，检查

shadowRoot

属性。

const shadow = host.shadowRoot || host.attachShadow({ mode: 'open' });