primary-keypolymer-2.x

How to access element through shadow DOM

I am trying to select an element that has by id through an imported web component.

Child Element

<template>
  <paper-button id="button"></paper-button>
</template>

Parent Element

<template>
  <custom-element id="el"></custom-element>
</template>

...

select() {
  let address = this.$.el.button.innerHTML;
}

However, this returns undefined. Is there a way to sub-query or access the button element some other way from the parent?

Something like this.$.el(this.$.button.innerHTML);

or this.$.el.shadowRoot.button.innerHTML

Solution

  • Once the shadowroot is selected, you can chain selections together with getElementById.

    this.$.shipMethod.shadowRoot.getElementById('address')