在 shadow DOM 中执行 JS答案

【问题标题】：Executing JS in shadow DOM在 shadow DOM 中执行 JS
【发布时间】：2014-07-09 08:55:23
【问题描述】：

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

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

【问题讨论】：

问题是，它有什么区别，影子 DOM 只是一种创建自定义 HTML 模板的构造，可以插入标签等（不止于此，但无论如何），它不是具有新线程和/或执行上下文的“不同”DOM，而是一个 webworker。
另请注意，使用 ajax 获取带有脚本标签的 HTML 以及将脚本标签作为字符串插入 DOM 时存在已知问题。
既然你对shadow DOM没问题，我认为你应该看看custom elements：shadow DOM和自定义元素是web组件项目的一部分，所以你应该一起查看它们。
谢谢，越来越清楚了，但我还是不明白为什么脚本执行之间有区别。

标签： javascript shadow-dom

【解决方案1】：

jsfiddle 验证脚本执行确实在 shadow dom 中工作当您使用纯 JS。因此，就脚本执行而言，我没有看到 shadow 和 light dom 之间的区别。

但是，如果我使用 jQuery，当我将 html 附加到影子根目录时，它似乎会忽略脚本标签。这也是一个jsfiddle。这似乎是 jquery 的一个错误，它重新定位了脚本标签，它与 shadow dom 一起破坏了脚本的执行。 Here 是少数尝试解释此行为的链接之一。

所以不要使用

$(root).append(clone2);

使用

root.appendChild(clone2);

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

【讨论】：