如何从包含在 Shadow DOM 内的另一个 Web 组件定位到 Shadow DOM 内的元素

Answer 1

IMO 设计的组件期望从组件外部访问它们的影子 DOM 内容（除了通过公共 API（如

@Method

s））是不正确的设计。在这种情况下，我建议 wc-tooltip 应在插槽中包含 wc-icon，而不是成为同级组件（或创建一个单独的组件来包含两者），并且还保存工具提示显示逻辑。实际可见的“工具提示”只是影子 DOM 的一部分，而不是整个组件，它实际上只是图标（或其他任何东西）的包装器，用于侦听鼠标活动以显示/隐藏可见的工具提示。所以类似：

<Host>
  <span><slot/></span>
  { this.tip && 
    <wc-tooltip>
      <wc-icon slot="trigger" id="help" name="my/fantastic/help/icon" />
      <div slot="tooltip">{ this.tip }</div>
    </wc-tooltip>
  }
</Host>

wc-工具提示：

@State() tooltipVisible: boolean = false;

@Listen('mouseenter') showTootlip() {
  this.tooltipVisible = true;
}

@Listen('mouseleave') hideTooltip() {
  this.tooltipVisible = false;
}

render() {
  return <Host>
    <slot name="trigger" />
    <div style={{ 
      display: this.tooltipVisible ? 'block' : 'none', 
      position: 'absolute', 
      left: ... 
    }}>
      <slot name="tooltip" />
    </div>
  </Host>;
}