Polymer 使用JavaScript从组件外部遍历到本地DOM

我试图使用JavaScript从聚合组件外部访问本地DOM元素。过去，我可以使用

document.querySelector

并使用

：：shadow

选择器选择shadowDOM元素

---

目前，我知道本地DOM被实现为“shady DOM”。在这种情况下，如何访问本地DOM元素？

假设您有一个如下所示的组件，并且需要从组件外部访问

div

元素：

<dom-module id="my-element">
  <template>
    <div id="container"></div>
  </template>
  <script>
    Polymer({is: 'my-element'});
  </script>
</dom-module>

现在，要进入

div

，我们有两个选项。第一个是聚合物的方便。这使得组件中的每个元素（存在并且在

就绪

之前压印）都被添加到

中。$。

。这使得从外面很容易接触到，就像这样：

var div = myElement.$.container;

var div = myElement.querySelector('div');

但是如果

div

没有ID，或者像这样无法访问，则可以使用附加到元素本身的Polymer自己的

querySelector

，如下所示：

var div = myElement.$.container;

var div = myElement.querySelector('div');

---

不过，我不得不说，这两种方法都应该是与组件交互的“最后手段”。通常，您不应该直接公开DOM元素，而应该公开驱动该组件的DOM的方法或属性。我建议您访问聊天室，让我们知道您想要做什么，我们可以为您提供一些好的选择。

对于我来说，这还不够。最后帮助我的是上面的答案，再加上这个：

我必须补充的是，我是一个初学者，当谈到聚合物，所以我不能真正解释为什么这对我来说是有效的，而不是上面的代码。

---

但我相信是这样的，因为我在页面中使用了myElement，而页面本身就是一个自定义元素。

hi-Zikes。谢谢你的解决方案。我加入聚合物松弛组织有问题，似乎我需要被邀请。

var myElement = this.shadowRoot.querySelector('#myElement');
var div = myElement.shadowRoot.querySelector('div');