'Shadow root cannot be created on a host which already hosts a shadow tree

I'm rendering a react app(Widget) inside Shadow DOM. So I looked at the div id where the widget is getting loaded currently.

See screenshow below. enter image description here

With this information, I want to create Shadow host like this.


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

But I'm getting this error.

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



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source