3

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

目前，我了解本地 DOM 是作为“阴暗 DOM”实现的。在这种情况下如何访问本地 DOM 元素？

4

2 回答 2

2

假设您有一个像下面这样的组件，并且您需要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 方便的自动节点查找。这使得组件中的每个元素（存在并在 之前被标记ready）都添加到this.$.<my-id>. 这使得从外面很容易接触到，就像这样：

var div = myElement.$.container;

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

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

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

于 2015-07-03T05:47:32.330 回答
0

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

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

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

于 2016-08-30T13:19:14.427 回答