如何在Polymer 3的Web Component中检测组件外部的点击事件

解决方案 #

核心问题原因

你之前尝试的const domNode = this本身是正确的，确实能拿到当前Web Component的宿主节点引用，失效的核心原因是Web Component默认开启的Shadow DOM会重定向事件目标：当点击发生在Shadow DOM内部、或者你的组件嵌套在其他开启Shadow DOM的父组件中时，全局拿到的event.target会被重定向到外层Shadow宿主，普通contains方法无法正确判断点击位置。而this.$['my-component']是Polymer用来获取组件Shadow DOM内带id的子元素的语法，本来就不能用来获取组件自身引用，所以写法错误。

正确实现代码

首先在组件生命周期中正确绑定/解绑事件，避免内存泄漏：

connectedCallback() {
  super.connectedCallback();
  // 捕获阶段绑定事件，和React实现逻辑对齐，避免内部阻止冒泡导致失效
  document.addEventListener('click', this.handleClickOutside, true);
}

disconnectedCallback() {
  super.disconnectedCallback();
  // 组件销毁时解绑事件
  document.removeEventListener('click', this.handleClickOutside, true);
}

然后改写外部点击判断逻辑，用event.composedPath获取完整事件冒泡路径，跳过Shadow DOM的事件重定向限制：

handleClickOutside = (event) => {
  // 获取事件完整冒泡路径，包含Shadow DOM内部的真实节点
  const clickPath = event.composedPath();
  // 判断当前组件实例是否在点击路径中，是则说明点击发生在组件内部
  const isClickInside = clickPath.includes(this);

  if (!isClickInside) {
    // 这里写外部点击的业务逻辑
  }
}

小提示：如果你的组件明确关闭了Shadow DOM，也可以直接用this.contains(event.target)判断，但用composedPath的写法兼容所有场景，不管是否开启Shadow DOM、是否嵌套在其他Shadow组件中都能正常工作，更推荐使用。

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