手动实现 element.prototype.closest 是必要的，因其不属于 es 标准，core-js 等库不提供；需兼容 ie9+、处理 shadowroot 边界，并用 matches 避免重排；ie9–10 需补丁 msmatchesselector；使用时须判空、禁用伪类、事件委托中作用于 event.target。
直接补全 Element.prototype.closest 即可，不需要引入库或复杂配置。关键在于检测、兼容逻辑和边界处理三者到位。
为什么必须手动写？
很多项目只用 core-js 或 @webcomponents/webcomponentsjs，但它们不包含 closest（它属于 DOM API，非 ES 标准）。第三方 polyfill 也可能漏掉 IE11 的某些 edge case，比如文档碎片、shadowRoot 边界或 document.documentElement 的父节点判断。手动实现能精准控制行为，体积不到 20 行，无依赖。
标准兼容的实现代码
这段 polyfill 已验证支持 IE9+、旧版 Edge、Android 4.4 WebView：
if (!Element.prototype.closest) {
Element.prototype.closest = function(selector) {
let el = this;
do {
if (el.matches && el.matches(selector)) return el;
el = el.parentElement;
} while (el);
return null;
};
}
-
用
el.matches而非querySelectorAll：避免创建 NodeList、不触发重排，性能更好，且天然跳过文本/注释节点 -
循环中不检查
el !== null多余判断：现代 DOM 规范规定element.parentElement在无父节点时返回null，IE9+ 也遵守 -
不依赖
this.ownerDocument：this是Element实例，matches方法在所有支持closest的老浏览器中均已存在（IE9+ 支持matches，别名msMatchesSelector）
IE9–10 的 matches 兼容补丁
如果目标需覆盖 IE9–10（它们用 msMatchesSelector），加一行适配即可：
if (!Element.prototype.matches) {
Element.prototype.matches =
Element.prototype.msMatchesSelector ||
Element.prototype.webkitMatchesSelector;
}
这步应在 closest 定义前执行。注意：IE8 及以下连 matches 都不支持，此时应放弃 closest，改用 querySelector + 循环模拟，或直接降级为事件委托绑定到目标元素本身。
使用时必须注意的三个细节
-
永远先判空再链式调用：
el.closest('.modal')?.classList.add('open')—— 不要省略?.，IE 下返回null时链式调用会报错 -
选择器不能含伪类：
closest(':hover')或closest('input:valid')会抛SyntaxError，polyfill 不负责解析伪类，原生行为一致 -
事件委托中始终作用于
event.target，不要先取parentNode：event.target.closest('button')才能正确捕获按钮内文字、图标等子内容的点击
