为什么 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

polymer-element 中的脚本标签不是 "scoped"，它们只是加载到文档中。只有 template 标签内的内容被认为是影子 DOM。在您的示例中，脚本标签不在阴影 DOM.

的一部分

如果您确实将脚本标记放在阴影 DOM 中，那么 JQuery 将不会加载，直到您创建 custom-el 的实例 - 这可能不是您想要的要么。

要让脚本在 "private scope" 中，请查看 Adding private or static variables. Basically, it is just wrapping your script in an anonymous function that runs immediately. More about immediately invoked function expression、

但是，它只适用于您编写的脚本，不适用于 JQuery 等外部库。

Answer 2

阴影 Dom 确实有一个 boundary。例如 css 影子根中包含的样式不适用于父文档。

但是它没有自己的执行上下文（执行环境，任何可能是正确的术语），就像 iframe 一样。因此 <scripts></script>'s，即使包含在影子 dom 树中，也会在与 window.

的其余部分相同的上下文中执行

而且由于 jQuery 和其他图书馆为图书馆分配了一个全局对象，即：

window.jQuery = window.$ = ...

随处可用。

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

Why is jQuery accessible from the console when loading it from within a custom element's scope?

javascript

polymer