javascript - 在 shadow DOM 中执行 JS

Question

我正在构建一个模块化网络应用程序，其中要处理各种用户创建的模型。 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 不会被执行。 header 出现在这两种情况下，但脚本仅在轻型 DOM 中执行。这是为什么？自定义JS如何在shadow DOM中执行？ (没有跨域的东西。)

Answer 1

这jsfiddle 当您使用普通 JS 时，验证脚本执行确实在 shadow dom 中有效。因此，我看不出 shadow 和 light dom 在脚本执行方面有什么区别。

但是，如果我使用 jQuery，当我将 html 附加到 shadow root 时，它似乎忽略了脚本标签。这是一个 jsfiddle也为此。这似乎是 jquery 的一个错误，它重新定位脚本标签，结合影子 dom 搞乱了脚本的执行。 Here是为数不多的尝试解释这种行为的链接之一。

所以不用

$(root).append(clone2);

使用

root.appendChild(clone2);

即使在 shadow dom 中，脚本执行也应该可以正常工作。