为什么从自定义元素范围内加载 jQuery 时可以从控制台访问它？

Question

我在聚合物元素中添加jQuery：

<polymer-element attributes="_id assetClass bgColorClass isAuthor tags" name="x-actions-panel">
  <template>
     ...
  </template>
  <script type="text/javascript" src="../../vendor/bower_components/jquery/dist/jquery.min.js"></script>
  <script>
    Polymer("custom-el", {
      ...
    })
</polymer-element>

加载jQuery后，我可以从控制台访问它（$）。怎么可能？聚合物组件不应该在阴影dom中包含脚本吗？它是否将脚本加载到ownerDocument中？如果确实确实将它们加载到ownerDocument中，是否有一种方法可以防止它这样做并将脚本保留在影子dom上？

Answer 1

阴影dom确实具有边界。例如，阴影根中包含的CSS样式不适用于父文档。

但是，它不会像iframes一样获得自己的执行上下文（执行环境，无论是正确的术语）。因此，<scripts></script>'s即使包含在阴影DOM树中，也在与窗口的其余部分相同的上下文中执行。

和由于jQuery和其他库为库为IE分配一个全局对象IE：

window.jQuery = window.$ = ...

到处都可以使用。

Answer 2

聚合物元素中的脚本标签不是"范围"，而是将它们加载到文档中。仅template标签中的东西被视为阴影dom。在您的示例中，脚本标签不在Shadow dom的一部分中。

如果您确实将脚本标签放在阴影dom中，则在创建custom-el实例之前，不会加载jQuery-这可能也不是您想要的。

要让脚本处于"私有范围"中，请考虑添加私人或静态变量。基本上，它只是将您的脚本包裹在立即运行的匿名函数中。有关立即调用函数表达式的更多信息，

但是，它仅适用于您编写的脚本，而不是诸如jQuery之类的外部库。