Question

我正在构建一个模块化的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>

正如评论所说，当内容插入到shadow DOM根目录时，JS不会被执行。标题出现在两种情况下，但脚本仅在轻型DOM中执行。这是为什么？如何在shadow DOM中执行自定义JS？（没有跨领域的东西。）

Answer 1

这个jsfiddle验证脚本执行确实在阴影dom 中使用普通JS。因此，在脚本执行方面，我没有看到shadow和 light dom之间的区别。

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

所以不要使用

$(root).append(clone2);

使用

root.appendChild(clone2);

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

在shadow DOM中执行JS

1 个答案: