5

我正在构建一个模块化 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?(没有跨域的东西。)

4

1 回答 1

4

您使用纯 JS时,此jsfiddle验证脚本执行确实在 shadow dom中有效。因此,就脚本执行而言,我看不到阴影和dom之间的区别。

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

所以而不是使用

$(root).append(clone2);

利用

root.appendChild(clone2);

并且脚本执行应该可以正常工作,即使在 shadow dom 中也是如此。

于 2015-10-05T16:56:12.517 回答