如何通过影子访问元素 DOM

Question

我正在尝试 select 通过导入的 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;
}

不过，这个returns未定义。有没有办法从父级以其他方式子查询或访问按钮元素？

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

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

Answer 1

选择 shadowroot 后，您可以将选择连同 getElementById。

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

How to access element through shadow DOM