Изоляция Shadow Dom не работает, как и ожидалось ⇐ Javascript

[Anonymous]

У меня есть модуль виджетов, который изготовлен в React and React-bootstrap, и для загрузки этого виджета я создал Runoob внешней функции, и я хочу загрузить эту функцию на одном из моих веб-сайтов с помощью Shadow dom < /p>
async function runoob (element_id, business_id, env = 'prod')
{< /p>

function loadScript(element_id, url, callback)
{
// Adding the script tag to the head as suggested before
var eObj = document.getElementById(element_id);
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;

// Then bind the event to the callback function.
// There are several events for cross browser compatibility.
if(callback)
{
script.onreadystatechange = callback;
script.onload = callback;
}
// Fire the loading
eObj.appendChild(script);
}

// Get the container where the div will be appended
const container = document.getElementById(element_id);
//Create root div
var divRoot=document.createElement('div');
divRoot.id='div_root';
divRoot.name='div_root';

//const shadowRoot=divRoot.attachShadow({ mode: "open" });
//tmpRoot=divRoot.shadowRoot;

// Create a new div element
var div = document.createElement('div');

// Set the div attributes
div.id='oob_div';
div.name='oob_div';
div.width = '100%'; // Set the width of the div
div.style.fontSize='14px';

// Optionally, you can set other attributes like style, frameBorder, etc.
div.style.border = 'none';
div.style.textAlign = 'center';

var img = document.createElement('img');
img.id="loading_gif";
img.name="loading_gif";
img.src=widgetURL + "/loading.gif";
img.alt="loading_gif";
img.style.width="100px";

var lText=document.createElement('div');
lText.innerText="Loading ... ";
lText.style.padding="20px";
div.appendChild(img);
div.appendChild(lText);

// Append the div to the container
//shadowRoot.appendChild(div);
divRoot.appendChild(div);
container.appendChild(divRoot);
console.log('Start loader');
//container.style.overflow='hidden';

// Add event listener for messages from the div
window.addEventListener('message', function(event) {
// Adjust the height of the div based on the message received
if (event.data.type === 'setHeight' && div) {
console.log('Revising height to: ',event.data.height)
div.style.height = event.data.height + 'px';
}
});

function strapDiv()
{
// Wait until the div is properly appended to the shadowRoot
const interval = setInterval(() => {
const oobDiv = document.getElementById('oob_div');
if (oobDiv) {
clearInterval(interval);
console.log('Remove loader');
document.getElementById('oob_div').style.textAlign="left";
OOBWidget.loadReactApp(oobDiv, business_id);

}
}, 100);
}

loadScript('div_root',"https://unpkg.com/react@18/umd/react.pr ... n.js",null);
loadScript('div_root', "https://unpkg.com/react-dom@18/umd/reac ... n.js",null);
loadScript('div_root', widgetURL + "/dist/oob_widget.js", strapDiv);
< /code>
} < /p>

const host = document.getElementbyid ('shadow_root');
const shadowrot = host.attachadow ({'redic_root');
const shadowrot = host.attachadow ({'shadow_root');

Код: Выделить всё

                                        const style = document.createElement("link");
style.rel = "stylesheet";
style.href = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css";
shadowRoot.appendChild(style);

const styleTag = document.createElement("style");
styleTag.textContent = `
* {
all: iniial;
font-family: inherit;
}
`;
shadowRoot.appendChild(styleTag);

const container = document.createElement('div');
container.className = 'padding-top-100';
shadowRoot.appendChild(container);

const widgetContainer = document.createElement('div');
widgetContainer.id = 'my_root';
widgetContainer.style.cssText = 'width:100%; height:100%; padding:0; border-width:0;';
container.appendChild(widgetContainer);

const externalScript = document.createElement('script');
externalScript.src = 'https://widget-dev.orderonbot.com/loadOOB_demo.js';

externalScript.onload = function() {
setTimeout(() => {
if (typeof runOOB === 'function') {
runOOB(widgetContainer.id, 'B-0253QOL', 'dev');
} else {
console.error('runOOB is not available.');
}
}, 500);
};
container.appendChild(externalScript)

Я не понимаю, где я делаю неправильно, может кто -нибудь мне помочь?

Подробнее здесь: https://stackoverflow.com/questions/794 ... s-expected