popover 是布尔属性，仅通过存在与否生效，正确写法为 popover（无等号、无值）；manual 模式需同时满足：元素带 popover 属性、js 调用 showpopover()/hidepopover()、显式监听事件。
popover="manual" 是什么，不是什么
它不是可选值，而是当前唯一可靠的手动控制模式；popover="auto" 在 Chrome 125+ 已发警告、Safari 从未支持、Firefox 完全忽略，写成 popover="manual" 本身**就错**——popover 是布尔属性，只认“存在”，不解析值。正确写法只有 popover（无等号、无引号、无值），等价于 popover=""。
所谓 “manual 模式”，实际指：目标元素带 popover 属性 + JS 调用 showPopover()/hidePopover() + 显式监听事件。三者缺一不可，浏览器才进入手动生命周期管理。
怎么让 showPopover() 正常调用不报错
常见错误是直接在未检测支持性的环境下执行，导致 Safari/Firefox 抛 TypeError: elem.showPopover is not a function。
- 必须前置检测：
if ("showPopover" in HTMLElement.prototype)，否则跳过或降级 - 目标元素不能是
<button></button>、<input>、<select></select>等可聚焦/交互元素，否则调用直接抛DOMException - 目标元素必须已存在于 DOM 中（不能是 JS 动态
appendChild后再加popover属性） - 确保元素没有冲突的
display样式（如display: block），否则 UA 的display: none和定位样式会打架
关闭弹出层时的坑与可控操作
hidePopover() 只隐藏当前元素，不干扰其他 popover，这点比 showPopover()（会自动关闭其他 manual popover）更安全。但真正难的是“关闭前动作”——原生 API 没有 beforeclose 或 onhide 事件。
- 关闭按钮必须绑定自定义逻辑：
<button onclick="saveDraft(); this.closest('[popover]').hidePopover()">确认关闭</button> - 不能依赖
toggleEvent的opened值反推关闭意图，因为该事件只在切换后触发，且不提供“原状态” - 想阻止关闭？不行。只能靠提前拦截 UI 操作（比如禁用按钮、弹 confirm）来延迟调用
hidePopover() - Esc 键默认关闭已打开的 manual popover，Firefox 125+ 才原生支持，旧版需手动监听
keydown并过滤Escape
z-index 和遮挡问题必须手动处理
原生 popover 默认 z-index 不够高，会被 <select></select>、<video></video>、<iframe></iframe> 盖住，这不是 bug，是 Chromium 114–125 的已知限制。
必须显式设置：
div[popover] {
z-index: 2147483647;
}
这个值要足够大，且不能依赖 CSS 变量或计算值——UA 样式优先级高，动态注入的样式可能被覆盖。另外，position: fixed 和 inset: 0 是 UA 自动加的，别试图用 position: absolute 覆盖，会导致定位失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
