popover是布尔属性，仅通过存在与否生效，正确写法为popover（无值）；必须加在非交互式容器（如<div>）上，且需在首次渲染时存在DOM中，动态添加无效。
popover 是布尔属性，不是字符串值
写 popover="auto" 或 popover="manual" 会直接失效——浏览器不识别这些值，也不报错，只是静默忽略。真正有效的写法只有 popover（无值），等价于 popover=""。它本质是一个开关：存在即注册进浏览器的 popover 系统，不存在就完全没资格参与任何弹出逻辑。
常见错误现象：加了 popover="auto" 后点击按钮没反应 → 实际是属性根本没被识别，目标元素压根没进 popover 生命周期。
-
popover必须写在要显示的容器上（如<div id="tip" popover>），不能写在触发按钮上 - 容器不能是
<button>、<input>等可聚焦元素，否则showPopover()调用时抛DOMException - 若用 JS 控制，必须确保该属性在调用
showPopover()前已存在于 DOM 中，动态插入后补属性在 Safari 17.4+ 下无效
popovertarget 只对可激活元素生效
popovertarget 不是通用 HTML 属性，它只被 <button>、<input type="button">、<input type="image"> 这类“可激活元素”原生支持。<div popovertarget="x"> 写了也白写，浏览器直接丢弃，不会触发任何行为。
使用场景很明确：纯声明式开关，不需要监听状态、不需动态更新内容、不依赖关闭前回调。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 触发元素的
popovertarget值必须严格匹配目标元素的id（大小写敏感，只允许字母、数字、-、_） - 目标元素必须是
<div popover>或<dialog popover>，不能是<p popover>（语义不合法） - 两者无需父子关系，但必须在同一个 DOM 树层级中；跨 shadow DOM 或通过
innerHTML动态注入都会导致 Safari 完全失效
z-index 不设就大概率被遮住
原生 popover 默认 z-index 很低，Chrome 114–125 中它会被 <select>、<video>、<iframe> 盖住，这不是 bug，是 UA 的硬编码设定。不显式调高，就等于默认放弃可见性。
性能影响几乎为零，但漏掉就是线上事故。
- 给 popover 元素加
style="z-index: 10000;"或 CSS 规则[popover] { z-index: 10000; } - 如果用了
::backdrop，它的层级独立，也要单独设高：[popover]::backdrop { z-index: 9999; } - Firefox 当前不支持 popover，这类样式调整对其无意义，但不影响其他浏览器
showPopover() 报 “The element does not have a popover attribute” 怎么办
这个错误不是说你漏写了 popover，而是浏览器在运行时没把它识别为合法 popover 元素——可能因为：DOM 尚未就绪、元素类型非法、或属性是后来 JS 补上的。
兼容性判断不能省：Safari 17.4+ 和 Firefox 126+ 才开始部分支持，Chrome ≥114 是主力支持渠道。
- 必须先检测：
if ("showPopover" in HTMLElement.prototype)，否则调用直接抛TypeError - 确保目标元素是静态 HTML 中就存在的，而非
document.createElement("div").setAttribute("popover", "")后 append 进去 - 避免混用：
popovertarget和showPopover()不能共存于同一组元素，否则行为不可预测
