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

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

这对我有用。

const hostRef = useRef<HTMLDivElement | null>(null);

if (hostRef.current) {
   // const shadowRoot = hostRef.current.attachShadow({ mode: 'open' });
   const shadowRoot = hostRef.current.shadowRoot || hostRef.current.attachShadow({ mode: 'open' });
}

Answer 2

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

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

或者，检查 shadowRoot 属性。

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