Dom 如何在全球范围内确定Polymer 1.x Polymer Web组件的范围

如果我在Polymer中有一个自定义web组件，是否可以将模板的范围限定为主DOM（index.html）的一部分，而不是隐藏在阴影中

我试图钩住一个由脚本激活的输入，但该脚本无法看到阴影DOM

<link rel="import" href="../../bower_components/polymer/polymer.html">

<dom-module id="custom-element">

<template>

  // Code to be scoped for index.html

  <div id="script-selects-this-id-and-converts-div-to-input"></div>

</template>

  <script>

    Polymer({

      is: 'custom-element'

    });

  </script>

</dom-module>

//要限定index.html范围的代码
聚合物({
是：“自定义元素”
});

当然，您可以指向窗口对象。这可能不是ShadowDOM应该如何工作的，但如果您有一些可以控制的库，那么这可能是唯一的解决方案。 因此，在自定义元素脚本中，您可以执行以下操作：

ready: function() {
  window.reference = this;
}

---

如果您尝试

console.log（window.reference）

当我

console.log（window.reference）

时，您可以看到有一个完整的自定义元素

，该元素确实会填充到开发工具中，尽管该元素本身仍然有一个脚本找不到的

#影子根

。是否可以执行类似于

window.reference=this.shadowRoot

的操作？我似乎正在接近

this.shadowRoot.innerHTML

选择器。如果使用

this.shadowRoot

，您可以在其中调用

.querySelector

，

getElementById

等等，所以我不知道问题出在哪里。问题是，您的库在做什么，或者它如何查找元素我尝试在

index.html

中创建一个节点并附加

getElementById

，但在使用

appendChild

时出现控制台错误。我能够使用

var square=this.shadowRoot.innerHTML获取要附加到DOM的表单；var节点=document.querySelector（'footer'）；node.innerHTML+=square；这是我的建设。但是，当使用此策略时，表单会附加到页脚，似乎对格式化的希望都没有了。有关此问题的更多详细信息，请参见：