原生 popover 是布尔属性，仅通过是否存在生效，不可赋值；必须静态存在于 dom 中且 id 匹配 popovertarget；需显式设置 z-index 避免被原生控件遮挡；js 调用前须确保属性已存在并检测浏览器支持。
原生 popover 属性不是“增强样式”或“加个提示”的小功能，它是浏览器级弹出层生命周期的开关——没它，元素根本进不了 popover 系统；有它，才可能被 popovertarget 控制、响应 Esc、自动避让焦点、获得固定定位与高层级。但它不等于“自动显示”，也不兼容所有浏览器。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
popover 是布尔属性，不能写成 popover="true" 或 popover="auto"
很多开发者看到文档里提 auto 和 manual 就直接写 popover="auto"，结果控制台静默失效。实际上：
- popover 是纯布尔属性，只认“是否存在”，不解析值
- popover="auto" 和 popover="manual" 在当前规范（Chromium 114+ / Safari 17.4+）中**已被废弃或未实现**
- 正确写法只有 popover（无值），等价于 popover=""
- 若需手动控制行为（如禁用点击外部关闭），得靠 JS 调用 hidePopover() 或监听事件干预，而非设属性值
popovertarget 必须指向 id，且 ID 必须合法、静态存在
常见失效不是代码写错，而是 DOM 状态不满足前提：
- popovertarget 的值必须严格匹配目标元素的 id 属性，大小写敏感，不能含空格或中文
- 目标元素（带 popover 的那个）必须在页面首次渲染时就存在于 DOM 中；用 innerHTML 动态插入后补 popover 属性，Safari 17.4+ 会拒绝识别
- 触发元素不限于 <button></button>，<input type="button"> 也支持；但 <div>、<code><span></span> 等普通元素**没有 popovertarget 属性**，即使加了也无效
- 不要求父子关系，可跨区域放置，但 ID 引用必须唯一
默认 z-index 不够高，会被
Chrome 114–125 存在已知层级缺陷：原生 popover 元素默认 z-index 值低于某些原生控件（如 <select></select>、<video></video>、<iframe></iframe>），导致面板被遮挡。这不是 bug，是 UA 样式设定如此。解决方式简单但必须显式声明：
- 给 popover 元素加内联或 CSS 规则：z-index: 10000 或更高
- 避免用 z-index: auto 或依赖继承
- 若同时使用 ::backdrop，它的层级独立，也要单独调高（如 ::backdrop { z-index: 9999; }）
- Firefox 当前不支持该特性，任何 z-index 调整都无意义
JS 控制时，showPopover() 报错多半因为漏了 popover 属性
调用 element.showPopover() 却抛出 DOMException: Failed to execute 'showPopover' on 'HTMLElement': The element does not have a popover attribute，原因几乎总是：
- 元素确实没写 popover 属性（哪怕只差一个字母，如写成 popver）
- 元素被 JS 动态创建后，先调 showPopover() 再添加 popover 属性（顺序错误）
- 使用了 Shadow DOM，而 popover 元素不在 light DOM 主树中（目前不支持跨 shadow boundary）
- 没检查浏览器支持：if ("showPopover" in HTMLElement.prototype) 应作为前置判断
最易被忽略的是：popover 不是“一加就弹”，它是开启一套浏览器内置弹出机制的准入凭证；没它，后续所有声明式或命令式操作都失去上下文。别把它当成 CSS 类，它更像 <dialog></dialog> 的 open 属性——决定是否进入特定生命周期，而不是控制显隐状态本身。
