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

EN

假设您有一个如下所示的组件，您需要从组件外部访问div元素：

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

在页面上，将元素放置为：

<my-element id="myElement"></my-element>

我们要做的第一件事是在我们的JS页面中获得对custom-element元素的引用：

var myElement = document.getElementById('myElement');

现在，为了达到div，我们有两个选择。第一个是聚合物的方便的自动节点查找。这使得组件中的每个元素(存在并在ready之前盖章)都被添加到this.$.<my-id>中。这使得我们很容易从外部接触到，就像这样：

var div = myElement.$.container;

但是，如果div没有ID，或者像这样无法到达，您可以使用附加到元素本身的聚合物自己的querySelector，如下所示：

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

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

这在我的情况下是不够的。最后帮助我的是上面的答案，再加上以下几点：shadowRoot.querySelector

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

我必须补充说，我是一个初学者，当涉及到聚合物，所以我不能真正解释为什么这对我，而不是上面的代码。但我相信情况是这样的，因为我在页面中使用了myElement，最终它本身就是一个自定义元素。