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')) { ... }
