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

Question

我正在尝试使用 JavaScript 从 Polymer 组件外部访问本地 DOM 元素。过去我可以使用 document.querySelector 和 select shadowDOM 元素使用 ::shadow selector.

目前，我了解到本地 DOM 实现为 "shady DOM"。在这种情况下，如何访问本地 DOM 元素？

Answer 1

假设您有一个如下所示的组件，您需要从组件外部访问 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，我们有两个选择。第一个是Polymer的得心应手automatic node finding。这使得组件中的每个元素（在 ready 之前存在并被标记）都被添加到 this.$.<my-id>。这使得从外面很容易到达，就像这样：

var div = myElement.$.container;

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

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

不过，我不得不说，这两个实际上应该是 "last resort" 与组件交互的方法。通常，与其直接公开 DOM 元素，不如公开驱动该组件 DOM 的方法或属性。我建议您访问 Polymer Slack 聊天室，让我们知道您想要做什么，我们可以为您提供一些不错的选择。

Answer 2

这对我来说还不够。最终帮助我的是上面的答案，结合这个： shadowRoot.querySelector

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

我必须补充一点，我是聚合物方面的初学者，所以我无法真正解释为什么这对我有用，而不是上面的代码。但我相信情况确实如此，因为我在一个页面中使用了 myElement，它本身就是一个自定义元素。

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

Traversing into Local DOM from Outside of the Component Using JavaScript

polymer

shady-dom