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

Question

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

目前，我了解到本地 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>

我们做的第一件事是获取对 custom-element 的引用我们页面 JS 中的元素:

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');

不过，我不得不说，这两种方法实际上应该是与组件交互的“最后手段”方法。通常，与其直接公开 DOM 元素，不如公开驱动该组件的 DOM 的方法或属性。我建议你顺便去 Polymer Slack聊天并让我们知道您想要做什么，我们可以为您提供一些不错的选择。