原生 popover 并非“加属性就弹”，当前仅 Chromium 稳定支持，Safari 仅部分支持 popovertarget，Firefox 全不支持；必须写成布尔形式 popover（无值），popover="auto"/"manual" 已被弃用或无效；目标元素需首次渲染即存在、ID 严格匹配、触发元素须为可激活元素；showPopover() 调用前须检测兼容性，且默认 z-index 不足，需手动设高值；两套机制（popovertarget 与 JS 控制）互不兼容，混用必失效，跨浏览器稳定方案仍推荐 <dialog> 或第三方库。
原生 popover 不是“加个属性就弹”，它在当前（2026 年中）仅 Chromium 系浏览器稳定支持，Safari 仅部分支持 popovertarget，Firefox 全不支持；想靠纯 HTML 实现跨浏览器可用的弹窗，基本不可行。
popover 属性必须写成布尔形式，不能带值
很多代码示例里写 popover="auto" 或 popover="manual"，这在 Chrome 125+ 已被警告弃用，Safari 从不识别，Firefox 直接忽略。真正有效的写法只有：popover（无值），或等价的 popover=""。
如果你用 JS 调用 showPopover()，目标元素却报错 “The element does not have a popover attribute”，大概率是因为你写了 popover="manual" —— 浏览器没把它当合法 popover 元素处理。
- ✅ 正确：
<div id="menu" popover>...</div> - ❌ 无效：
<div id="menu" popover="auto">、<div id="menu" popover="manual">、<div id="menu" data-popover> - ⚠️ 注意：该属性必须在页面首次渲染时就存在于 DOM 中，动态插入后补
popover，Safari 17.4+ 会静默拒绝
popovertarget 只对可激活元素有效，且需初始化
popovertarget 看似能“零 JS”触发，但实际有个隐藏前提：目标元素必须已通过 showPopover() 或 hidePopover() 至少调用过一次（哪怕在 <body onload="document.getElementById('x').showPopover()"> 里也行）。否则点击毫无反应。
立即学习“前端免费学习笔记（深入）”；
- ✅ 支持的触发元素：
<button popovertarget="menu">、<input type="button" popovertarget="menu"> - ❌ 无效触发元素：
<div popovertarget="menu">（div不是可激活元素，属性被忽略） - ? ID 必须严格匹配：
popovertarget="help-tip"对应<div id="help-tip" popover>，ID 中不能含空格、中文、点号或下划线以外的符号 - ? 不支持跨 shadow DOM：
popovertarget指向 shadow root 内的元素，在 Chromium 125+ 已失效
showPopover() / hidePopover() 必须检测兼容性
直接调用 element.showPopover() 在 Safari 和 Firefox 会抛 TypeError，因为这两个方法根本不存在。不包裹检测，JS 就会中断执行。
手动控制模式（比如要监听状态、动态更新内容、关闭前保存数据）唯一可行路径就是 JS 主动调用，但必须满足：
- ✅ 目标元素是
<div popover="manual">？错 —— 当前规范要求写成<div popover>，但 Chromium 实际只认popover="manual"才允许 JS 控制（这是现实与规范的撕裂点） - ✅ 目标元素不能是
<button>或<input>，否则调用直接抛DOMException - ✅ 必须提前检测：
if ("showPopover" in HTMLElement.prototype) { panel.showPopover(); } - ✅ 关闭按钮推荐写法：
<button onclick="this.closest('[popover]').hidePopover()">×</button>，避免硬编码 ID
z-index 不够高，会被 select/video 遮住
原生 popover 默认渲染在普通文档流之上，但低于 <select>、<video>、<iframe> 等原生控件。Chrome 114–125 存在这个层级缺陷，不是 bug，是 UA 样式设定。
解决方式简单粗暴但必须做：
- 给 popover 容器显式设高
z-index：style="z-index: 10000;"或 CSS 规则[popover] { z-index: 10000; } - 如果用了
::backdrop，它有自己的堆叠上下文，也要单独设：[popover]::backdrop { z-index: 9999; } - Firefox 当前不支持 popover，任何
z-index调整都无意义 —— 这提醒你：别试图用 popover 做全平台方案
最常被忽略的一点：所谓“原生 popover”其实分两套互不兼容机制——popovertarget + 布尔 popover 是一套，showPopover() + popover="manual" 是另一套。混用必失效，而两者又各自有浏览器支持断层。真要上线，<dialog> 或轻量第三方库仍是更可控的选择。
