CODEWITHSUNDEEP
polymershadow-dom
mknaf
mknaf

Reputation: 873

How to access multiple #shadow-roots in Polymer?

The <lingenio-view-translation> element actually extends another element, so I guess this is where the multiple #shadow-root tags stem from. The lower one is the #shadow-root from the extended element, the upper one from the extending element. How can I access the extended element from within <lingenio-view-translation> aka the extending one? this.shadowRoot always returns the top one.

multiple #shadow-root tags

Upvotes: 1

Views: 588

Answers (1)

Winchestro
Winchestro

Reputation: 2188

use the "shadowRoots" property. example:

Polymer('x-zot', {
  ready: function() {
    console.assert(
      this.shadowRoots['x-foo'].querySelector('#foo') === this.$.foo
    );
    console.assert(
      this.shadowRoots['x-bar'].querySelector('#bar') === this.$.bar
    );
    console.assert(
      this.shadowRoots['x-zot'].querySelector('#zot') === this.$.zot
    );
  }
});

Upvotes: 2

Related Questions