我正在构建一个模块化 Web 应用程序,其中要处理各种用户创建的模型。Shadow DOM 是一个显而易见的选择,但我不明白如何在 shadow DOM 中执行 JS。
我有一个 HTML 内容要加载以下虚拟脚本。
<h1>Nice header</h1>
<script type="text/javascript">
console.log('hello')
alert('hi');
</script>
我使用以前的脚本加载页面,如下所示:
<div id="shadow-target"></div>
<div id="non-shadow-target"></div>
<script>
// Called on btn click
loadShadow = function(module) {
var root = document.querySelector('#shadow-target').createShadowRoot();
var lighttarget = document.querySelector('#non-shadow-target');
$.get('whatever.html', function (data) {
alert(data);
$(root).append(data); // Nothing executed
$(lighttarget).append(data); // Works fine
// The header appears in both cases
});
}
</script>
正如评论所说,将内容插入到影子 DOM 根目录时不会执行 JS。标头出现在这两种情况下,但脚本仅在轻 DOM 中执行。这是为什么?如何在 shadow DOM 中执行自定义 JS?(没有跨域的东西。)