如何通过影子DOM访问元素

Question

我试图通过导入的Web组件选择具有id的元素。

子元素

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

父元素

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

...

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

但是，这返回未定义。是否可以通过父级的其他方式来子查询或访问按钮元素？

类似this.$.el(this.$.button.innerHTML);

或this.$.el.shadowRoot.button.innerHTML

Answer 1

一旦选择了shadowroot，您就可以将选择与getElementById链接在一起。

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