在影子 DOM 中导入和使用 Javascript [重复]答案

【问题标题】：Import and consume Javascript inside shadow DOM [duplicate]在影子 DOM 中导入和使用 Javascript [重复]
【发布时间】：2021-12-05 07:20:00
【问题描述】：

我在 javascript 中创建了一个影子 dom，一切都按预期工作。除了，我想向它添加一个远程 JS 脚本并使用它包含的一个函数。但是不知道该怎么做。

这是我用于创建影子 DOM 的一段代码：

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');

shadowDom.appendChild(js);
shadowDom.appendChild(wrapper);

code.js 脚本包括：

function test()
{
    alert("ok");
}

将 code.js 添加到小部件脚本内的 shadow DOM 后，如何调用 test() 函数？

谢谢

【问题讨论】：

脚本在全局范围内运行；所以不需要将JS代码附加到shadowDOM，你可以将它附加到HEAD或BODY。解析完外部脚本后，使用onload 事件触发代码；见：stackoverflow.com/questions/16230886/…

标签： javascript shadow-dom

【解决方案1】：

自动调用函数的最简单方法是在导入的代码中使用以下语法。

function test()
{
    alert("ok");
}()

这应该在评估代码后立即执行该函数。

【讨论】：