如何在Shadow DOM中导入远程JS脚本并调用其包含的函数

核心原理说明 #

Shadow DOM 仅隔离CSS样式和DOM查询范围，不会隔离JavaScript的执行作用域。你插入到Shadow DOM中的<script>标签加载后，脚本的执行上下文依然是全局window对象，因此code.js中定义的test函数默认会直接挂载到window上，可全局访问。
你无法直接调用的核心原因是**动态插入的远程脚本是异步加载的，在执行调用时脚本还未加载完成，会触发函数未定义报错。 #

具体实现方法 #

监听script标签的load事件，等脚本加载完成后再调用目标函数即可，修改后的代码如下：

var shadowDom = this.attachShadow({ mode: 'open' });
var html = "<div class='stuff'>Hi!</div>";

let wrapper = document.createElement('div');
wrapper.innerHTML = html;

const js = document.createElement('script');
js.setAttribute('src', 'http://mywebsite.com/js/code.js');
// 监听脚本加载完成
js.onload = function() {
    // 直接调用即可，也可以显式写window.test()让作用域更明确
    test();
}
// 可选：添加加载失败监听
js.onerror = function() {
    console.error('远程脚本加载失败，请检查地址合法性');
}
shadowDom.appendChild(js);
shadowDom.appendChild(wrapper);

特殊场景处理（脚本为ES模块时的情况） #

如果你给script标签添加了type="module"属性将脚本作为ES模块加载，模块顶层的函数不会默认挂载到window上，需要你手动在code.js中将函数挂载到全局对象：

// code.js 内修改内容
window.test = function() {
    alert("ok");
}

然后再按照上述监听load事件的方式调用即可。 #

内容的提问来源于stack exchange，提问作者jennie788