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

Question

I have my element :

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

and I use it like

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

in my imperative part:

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 ? */
  }
});

Is it possible to do that using Polymer built-in's ? Or should I use the default DOM api ?

Solution

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.

Comments

[Ben Thomas]

might be worth clarifying that this.$$.(selector) returns the first node in the elements local DOM that matches the selector.

[Adaline Simonian]

Thanks for the tip, @benhjt! I threw in the clarification. :)

[vdegenne]

@VartanSimonian thanks for the solution ! I think it is an obscure trait of Polymer. this refers to the element, then why Polymer.dom(this) is used to manipulate only the light DOM ? I think it is a bit confusing.

[Adaline Simonian]

@발렌탕 I can see how it can get a little befuddling! I certainly get tangled up sometimes. One way to think of it is that this always, as you've correctly noted, always refers to the element itself. Polymer.dom(...) is a wrapper of sorts that makes sure that, when you're modifying the DOM, it gets modified properly, regardless of whether you give it this, which will edit the light DOM, or this.root to tap into the local DOM. The standard DOM has no idea about what Polymer is doing, hence this wrapper! If I answered your question to your liking, would you mind marking it as an answer? :)

[vdegenne]

@VartanSimonian thanks again my dear man, that was sure helpful, keeping on tracks of the nice Polymer's talks !

[Bobby Battista]

So this.$.special-paragraph would NOT work here, because this.$ only works for IDs, while this.$$() also works for classes?

[Max Waterman]

@BenThomas IINM, that should be this.$$(selector) - ie no '.' between '$$' and '('.

[vdegenne]

My question was about Polymer 1