如何使用Polymer查询元素DOM的Selector元素

我有我的元素：

<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？

解决方法

如果需要此功能,可以使用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不同,$$函数只返回一个元素：本地DOM中与选择器匹配的第一个元素.

（编辑：武汉站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!