我有我的元素：
<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？
解决方法
Polymer不提供辅助函数或抽象,它将列出来自light和local DOM的节点.
如果需要此功能,可以使用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中与选择器匹配的第一个元素.
