在Stencil.js中如何从嵌套子组件获取父组件？

为什么closest()和parentElement无效？ #

因为<ifx-sidebar-item>作为自定义元素，大概率使用了Shadow DOM进行封装。Shadow DOM的核心特性是DOM隔离：

• 当你在组件内部调用this.el.closest('ifx-sidebar')时，this.el属于当前组件的Shadow DOM局部树，closest()只会在这个局部树内查找，无法穿透到外部主DOM树，因此返回null。
• parentElement同理，最多只能找到Shadow Root对应的宿主元素（当前<ifx-sidebar-item>本身），无法跨Shadow边界继续向上查找。

解决方法 #

方法1：通过Shadow Root获取宿主元素再查找 #

如果<ifx-sidebar-item>的Shadow DOM是开放模式（mode: 'open'），可以通过getRootNode()获取Shadow Root，再拿到宿主元素，之后从宿主元素向上查找目标：

// 在ifx-sidebar-item组件内部执行
const hostElement = this.el.getRootNode().host;
const sidebar = hostElement.closest('ifx-sidebar');

若Shadow DOM为封闭模式（mode: 'closed'），此方法不可用，需改用下方事件路径方案。

方法2：利用事件的composedPath() #

在点击事件处理函数中，event.composedPath()会返回事件冒泡过程中经过的所有节点（包含跨Shadow DOM的节点），可直接从数组中筛选目标元素：

function handleSidebarPage(event) {
  // 从事件路径中找到第一个ifx-sidebar元素
  const sidebar = event.composedPath().find(el => el.tagName === 'IFX-SIDEBAR');
  if (sidebar) {
    // 执行后续逻辑
  }
}

此方法不受Shadow DOM模式限制，只要事件的composed属性为默认的true（除非组件显式设置为false）即可生效。

方法3：自定义组件主动关联父级（若你是组件开发者） #

如果你负责开发<ifx-sidebar-item>，可以在组件初始化时直接查找并缓存父级<ifx-sidebar>：

class IfxSidebarItem extends HTMLElement {
  connectedCallback() {
    this.sidebar = this.closest('ifx-sidebar');
  }
}

后续在组件内部直接使用this.sidebar即可。

内容的提问来源于stack exchange，提问作者happy_story