如何使用 Polymer 查询元素 DOM 的选择器元素

Question

我有我的元素:

<dom-module id="x-el">
  <p class="special-paragraph">first paragraph</p>
  <content></content>
</dom-module>

我喜欢用它

<x-el>
  <p class="special-paragraph">second paragraph</p>
</x-el>

在我的命令部分：

Polymer({
  is: 'x-el',

  ready: function () {
    /* this will select all .special-paragraph in the light DOM
       e.g. 'second paragraph' */
    Polymer.dom(this).querySelectorAll('.special-paragraph');

    /* this will select all .special-paragraph in the local DOM
       e.g. 'first paragraph' */
    Polymer.dom(this.root).querySelectorAll('.special-paragraph');

    /* how can I select all .special-paragraph in both light DOM and
       local DOM ? */
  }
});

是否可以使用内置的 Polymer 来做到这一点？或者我应该使用默认的 DOM api ?

Answer 1

Polymer 不提供辅助函数或抽象，它将列出来自灯光和本地 DOMs 的节点.

如果您需要此功能，可以使用 this.querySelector(selector)。

附带说明一下，除了 Polymer.dom(this.root).querySelectorAll(selector) 方法之外，Polymer 还提供了 $$ 实用函数，它有助于访问元素局部 DOM 的成员。该函数使用如下：

<dom-module id="my-element">
  <template>
    <p class="special-paragraph">...</p>
    <content></content>
  </template>
</dom-module>

<script>
  Polymer({
    is: 'my-element',
    ready: {
      this.$$('.special-paragraph'); // Will return the <p> in the local DOM
    }
  });
</script>

请注意，与 querySelectorAll 不同，$$ 函数仅 returns 一个元素：局部 [=30] 中的 第一个 元素=] 匹配选择器。

Answer 2

您可以记住的另一种解决方案是：

var elements = this.shadowRoot.querySelectorAll("input")

如何使用 Polymer 查询元素 DOM 的选择器元素

How to querySelector elements of an element's DOM using Polymer

polymer

polymer-1.0