原生 popover 无自动关闭和多层嵌套支持——这是规范硬性限制，非配置问题；popover="auto" 的“自动”仅依赖浏览器内部 lifo 栈管理，不可靠且跨浏览器不一致；嵌套 popover 被规范禁止，子 popover 不会激活；点击外部关闭需手动监听 document 并用 composedpath 判断；z-index 必须显式设为大整数，不可用 css 变量；降级需检测 "showpopover" 支持并回退至 data-tooltip 方案。
原生 popover 没有自动关闭机制，也不支持多层嵌套——这两点不是配置问题，而是规范硬性限制。
popover="auto" 的“自动关闭”其实是假象
很多人以为 popover="auto" 点击外部会自动收起，其实它只在极少数场景下“看起来像自动”：比如连续点击两个不同 popovertarget 按钮时，前一个会关、后一个开。但这不是监听 document click 实现的，而是浏览器内部的 popover 栈管理逻辑（LIFO），且不保证跨浏览器一致。
常见错误现象：
- 点击空白处，popover 一动不动
- 点击另一个按钮触发新 popover，旧的还叠在上面（尤其 Safari/Firefox）
- 移动端轻点外部，毫无反应
实操建议：
- 别依赖
popover="auto"的“自动”，它不可监听、不可拦截、无法降级兜底 - 所有需要可靠关闭逻辑的场景，必须用
popover（无值）+showPopover()/hidePopover()+ 手动document.addEventListener('click', ...) - 检测支持性：
if ("showPopover" in HTMLElement.prototype)，否则跳过或回退到data-tooltip类方案
嵌套 popover 在 DOM 中根本不会激活
写成这样：
<button popovertarget="a">一级</button> <div id="a" popover="auto"> <button popovertarget="b">二级</button> <div id="b" popover="auto">不会出现</div> </div>
结果是：点“一级”后，“二级”按钮完全无法触发 id="b" 的 popover。原因很直接——W3C 规范明确要求，popover 元素必须处于 document top-level，不能嵌套在另一个已打开的 popover 内部。浏览器发现 id="b" 在 id="a" 的子树里，直接忽略其 popover 属性。
实操建议：
- 放弃“气泡里再弹气泡”的原生幻想；
showPopover()调用时若已有其他 manual popover 打开，会抛DOMException: Cannot show a popover while another is already shown - 真要分层交互，用
@floating-ui/react或popper.js手动管理多个浮层实例，各自控制z-index、定位和显隐 - 纯 HTML/CSS 方案只能扁平化：把“二级内容”放进一级
popover内部，用<details></details>或max-height + overflow折叠展开
点击外部关闭必须手动监听，且要注意 composedPath
原生 popover 不带 backdrop，也不接管焦点流，所以默认对 document click 完全无感。想实现点击外部关闭，必须自己加监听，但容易踩坑：
- 用
event.target.closest('#my-popover')判断点击位置？在 Shadow DOM 场景下可能失效 - 只检查
event.target？遇到事件冒泡穿透（比如 popover 里有个自定义组件）就误关 - 绑定到
body上？fixed 定位元素覆盖区的点击会被漏掉
实操建议：
- 监听
document，不是body - 用
event.composedPath().includes(popoverEl)替代closest()，兼容 Shadow DOM - 同时检查是否点在触发器上：
event.composedPath().includes(triggerBtn)，避免一打开就关 - 多个 popover 共存时，别靠全局变量维护当前打开项，改用
document.querySelectorAll('[popover]').forEach(...)遍历判断:popover-open（仅 Chromium 支持）或自定义 class
z-index 和遮挡问题必须硬编码，不能靠 CSS 变量
原生 popover 默认 z-index 很低，常被 <select></select>、<video></video>、<iframe></iframe> 盖住，这不是 bug，是 Chromium 114–125 的已知渲染限制。
实操建议：
- 必须显式设置：
div[popover] { z-index: 2147483647; }—— 这个值要足够大，且不能是 CSS 变量或 calc() 计算值，否则 UA 内置样式优先级更高，动态注入的样式会被覆盖 - 不要给 popover 元素加
position: absolute或transform，会干扰其自动定位逻辑，导致视觉错位甚至事件捕获异常 - 用
display: none控制显隐？绝对不行，会破坏 popover 生命周期，必须始终走showPopover()/hidePopover()
最麻烦的其实是降级处理：Firefox 当前（2026年8月）仍不支持 popovertarget 和 popovertargetaction，只认 JS 方法；Safari 对 beforetoggle 事件支持不稳定；这些细节一旦漏掉，用户看到的就是完全静默的失败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
