Question

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

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

Answer 1

假设您有一个类似下面的组件，您需要从组件外部访问while read line; do echo "$line <br />"; done <<< "$lines"元素：

div

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

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

我们要做的第一件事就是在JS页面中引用<my-element id="myElement"></my-element>元素：

custom-element

现在，要进入var myElement = document.getElementById('myElement');，我们有两种选择。第一个是Polymer的方便automatic node finding。这使得组件中的每个元素（存在并在div之前标记）都添加到ready。这使得从外面轻松到达，如下：

this.$.<my-id>

但是如果var div = myElement.$.container;没有ID，或者像这样无法访问，你可以使用Polymer自己的div附加到元素本身，如下所示：

querySelector

但是，我必须说，这两者都应该是与组件交互的“最后手段”方法。通常不是直接暴露DOM元素，而是应该公开驱动该组件的DOM的方法或属性。我建议您通过Polymer Slack聊天，告诉我们您的目标，我们可以为您提供一些不错的选择。

Answer 2

在我的情况下，这还不够。最后帮助我的是上面的答案，结合这个： shadowRoot.querySelector

String sResult = new String(pchBuffer);

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

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

2 个答案: