How to querySelector elements of an element's DOM using Polymer
Polymer does not provide a helper function or abstraction that will list nodes both from the light and local DOMs.
If you require this functionality, you can use this.querySelector(selector)
.
On a side note, aside from the Polymer.dom(this.root).querySelectorAll(selector)
method, Polymer also provides the $$
utility function which helps in accessing members of an element's local DOM. This function is used as follows:
<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>
Note that, unlike querySelectorAll
, the $$
function only returns one element: the first element in the local DOM which matches the selector.