在shadow DOM中执行JS

我正在构建一个模块化的Web应用程序，其中处理各种用户创建的模型。 Shadow DOM是一个明显的选择，但我不明白JS如何在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>

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

来源

2014-07-09 Gábor Imre

问题是，它有什么不同，阴影DOM只是一个构造来创建自定义HTML模板，可以插入标签等（多一点，但无论如何），它不是一个“不同” “一个新的线程和/或执行上下文，这将是一个webworker。 – adeneo

另请注意，使用ajax获取带脚本标记的HTML时存在已知问题，并且还会将脚本标记作为字符串插入到DOM中。 – adeneo

既然你可以使用shadow DOM，我认为你应该看看[自定义元素]（http://www.html5rocks.com/en/tutorials/webcomponents/customelements/）：shadow DOM和自定义元素是部分的Web组件项目，所以你应该一起查看它们。 – MaxArt

这jsfiddle验证脚本执行确实在阴影dom内工作当你使用普通的JS的。因此，我没有看到阴影和灯 dom在脚本执行方面的区别。

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

因此，而不是使用

$(root).append(clone2);

使用

root.appendChild(clone2);

和脚本执行应该做工精细，即使在阴影DOM。

来源

2015-10-05 16:56:12 Abhinav

在shadow DOM中执行JS

回答

相关问题