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中是否有办法阻止它这样做并将脚本保存在shadowDOM中？

Answer 1

聚合物元素中的脚本标签不是“作用域”，它们只是加载到文档中。只有template标记内的内容才被视为影子DOM。在您的示例中，脚本标记不是影子DOM的一部分。

如果你将脚本标记放在shadow DOM中，那么在你创建custom-el的实例之前就不会加载JQuery - 这可能不是你想要的。

要让脚本位于“私有范围”中，请查看Adding private or static variables。基本上，它只是将脚本包装在一个立即运行的匿名函数中。有关immediately invoked function expression的更多信息，

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

Answer 2

暗影Dom确实有boundary。例如，影子Root中包含的css样式不适用于父文档。

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

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

window.jQuery = window.$ = ...

随处可用。

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

2 个答案: