Question

我有一个组件，该组件使用<another-component>中的命名槽。我试图通过在<span>中调用this.shadowRoot.getElementById('title')来获得<another-component>，但它总是返回null：

  render() {
    return html`
      <another-component>
        <h2 slot="header">
          <span id="title"></span>
        </h2>
        <div slot="footer">
          ${this.renderFooter()}
        </div>
      </another-component>
    `;
  }

有什么想法吗？

Answer 1

经过一番挖掘，我发现这是设计使然。如果我错了，请纠正我。基本上，无论是否位于<slot>中，您都只能访问定义了阴影根的DOM元素。

例如，在您的主要组件中，您有一个组件A，其中的元素ID为：

// main component's render
<a>
  <p id="title"></p>
</a>

组件A使用组件B，并将其插槽内容映射到组件B中的另一个插槽：

// component A's render
<b>
  <p slot="header">blabla</p>
  <slot slot="content"></slot>
</b>

A和B都无法通过shadowRoot.getElementById访问该元素。只有主组件才能通过ID获取元素。

如何访问子组件<slot>中的元素？

1 个答案: