Element 未挂载时调用 matches 会因 DOM 节点不存在而报错，需通过 safeMatches 工具函数主动防御：先校验 element 是否为有效 Element 实例，再确认其是否挂载于 document.body 或根节点，最后执行 matches。

Element 组件在未挂载（unmounted）状态下调用 matches 会报错，因为此时 DOM 节点尚未存在或已被销毁，element.matches 无法执行。这不是浏览器兼容性问题，而是生命周期导致的运行时异常。核心解法是**主动防御条件链路**，而非依赖 try-catch 或事后兜底。

检查元素是否真实存在且已挂载

仅判断 element !== null 不够——它可能是一个已创建但未插入 DOM 的节点，或已被 remove() 但变量仍引用。应结合两个事实：

• 存在性：确保 element 是有效 Element 实例（非 null、undefined、Text、Comment 等）
• 挂载性：通过 element.ownerDocument?.body?.contains(element) 判断是否在当前文档 body 中（适用于常规挂载场景）；对 Shadow DOM 或动态容器，改用 element.getRootNode() === document 或检查其父级是否为有效宿主节点

封装安全的 matches 调用工具函数

避免每次手动写防御逻辑。推荐统一封装：

function safeMatches(
  element: Element | null | undefined,
  selector: string
): boolean {
  if (!element || !(element instanceof Element)) return false;
  if (!element.ownerDocument || !element.ownerDocument.body) return false;
  if (!element.ownerDocument.body.contains(element)) return false;
  return element.matches(selector);
}

该函数天然支持可选链和短路，可直接用于条件表达式中，如：
if (safeMatches(el, '.btn-primary')) { ... }

在 Vue/React 等框架中绑定生命周期意识

若 element 来自 ref（如 Vue 的 ref 或 React 的 useRef），需明确其有效性边界：

• Vue：在 onMounted 后首次获取，onBeforeUnmount 中清空或标记失效；避免在 onUnmounted 钩子外异步回调中使用
• React：配合 useEffect 清理函数，或用 useState + useLayoutEffect 确保 DOM 已就绪再读取 ref
• 通用原则：不缓存 DOM 元素引用超过单次渲染周期，尤其涉及定时器、事件监听器、Promise 回调等异步上下文

规避隐式触发 matches 的高危模式

某些操作会间接触发 matches，例如：

• 第三方库内部调用（如某些动画库、表单验证器）
• 自定义指令中未加防护地执行 el.matches(...)
• 事件委托中用 e.target.matches 但未校验 e.target 类型

建议：对所有外部传入的 target 或 el 做前置过滤，例如
if (e.target instanceof Element && safeMatches(e.target, '.action-btn')) { ... }