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