dman
dman

Reputation: 11073

Easier Way To Query Nested Shadow Element From Inside Element?

Polymer 1.0

I am not using shady dom, but native shadow dom in chrome.

Is there a easier way to query <paper-checkbox name="pets" id="noPets">? Since it is nested in <template is="dom-if" if="{{foo}}"> I can not use this.$.noPets:

<dom-module id="foobar-element>
  <template>
...
  <template is="dom-if" if="{{foo}}">
    <paper-checkbox name="pets" id="noPets">
...
  attached: function() {
    var rootEl = Polymer.dom(document.querySelector('my-app').root);
    var level2 = Polymer.dom(rootEl).querySelector('foobar-element').root;
    Polymer.dom(level2).querySelector('#noPets').addEventListener('change', (e)=> {});
   }

Upvotes: 0

Views: 72

Answers (1)

Kuba Šimonovsk&#253;
Kuba Šimonovsk&#253;

Reputation: 2041

You can use this.$$(querySelector)

here is documentation: https://polymer.github.io/polymer/

So in you case it would be: this.$$("#noPets")

Upvotes: 1

Related Questions