closest 不会无限穿透，只在当前元素及其祖先中查找至 document 根为止；其仅支持合法 css 选择器，不支持后代、子组合器、伪类等；必须检查返回值是否为 null，避免运行时错误；应使用语义化属性选择器并确保元素已挂载。
closest 不会“无限穿透”，它只在当前元素及其祖先节点中查找，到 document 根就停止。所谓“无限穿透”其实是误判结果为 null 后未做防护，或选择器本身写错导致始终匹配不到，进而让后续逻辑误以为找到了错误层级——本质是逻辑失控，不是方法越界。
选择器语法必须合法且语义明确
closest 只接受标准 CSS 选择器，不支持后代组合器（如 div p）、子组合器（如 div > p）、伪类（如 :hover、:nth-child()）或相对选择器（如 + span）。这些写法要么报错，要么静默返回 null。
- ✅ 正确：el.closest('.modal')、el.closest('[data-role="form"]')、el.closest('article')
- ❌ 错误：el.closest('div .content')（含空格，被当后代选择器拒绝）、el.closest('button:disabled')（伪类不支持）、el.closest('')（空字符串直接抛 TypeError）
务必检查 closest 返回值是否为 null
一旦选择器无匹配，closest 立即返回 null。若不做判断就链式调用（如 el.closest('.x').dataset.id），会立即报 Cannot read property 'dataset' of null。这不是穿透，而是运行时崩溃。
- 推荐写法：const form = el.closest('form'); if (!form) return;
- 可选安全链：el.closest('.x')?.dataset?.id（需环境支持可选链）
- 避免：el.closest('.x').querySelector('input') —— 没有判空，一错全崩
警惕选择器范围过大或过小
范围过大（如用 'div'）可能匹配到意外的祖先；范围过小（如 '.card-header-btn'）可能根本不存在，导致返回 null。关键是要贴合业务语义，而非 DOM 层级。
- 优先用属性选择器：el.closest('[data-section="main"]') 比 el.closest('div div div') 更稳定
- 避免硬编码嵌套深度：el.closest('.container .inner') 会失败（不支持空格后代语法），应改用单层语义类或属性
- 多个可选目标可用逗号分隔：el.closest('[data-action], .js-submit')，任一命中即止
确认元素已挂载且上下文正确
closest 查找依赖真实的 DOM 树结构。若元素刚创建但尚未 append 到文档，或处于 Shadow DOM 内部却试图跨边界查找，都会返回 null——看起来像“找不到”，实则是作用域隔离。
- 动态插入后，确保在 appendChild 或 insertAdjacentElement 之后再调用 closest
- Shadow DOM 中：不能用 shadowRoot.querySelector('slot').closest('.host')，应改用 host.closest('.host') 或监听事件时设 composed: true
- iframe 内元素无法被外层文档的 closest 访问，这是浏览器安全限制，非 bug
