popover属性不能直接加在按钮上触发弹窗，必须加在弹出容器（如<div>）并设为"manual"，再通过showPopover()显式调用才生效；仅Chromium 114+支持，Safari和Firefox不支持，推荐用兼容性更好的<dialog>替代。
popover 属性不是“加了就弹”的快捷开关，它目前仅在 Chrome/Edge 114+ 中实验性可用，且必须配合 JS 显式调用 showPopover() 才能生效，Safari 和 Firefox 完全不支持。
为什么 popover="auto" 写在按钮上完全没反应
因为 popover 是全局属性，但**只能加在弹出内容容器上**（如 <div popover="manual">），不能加在触发元素（如 <button>）上。常见错误写法：<button popover="auto">点我</button>——浏览器直接忽略，也不报错。
-
popover="auto"会尝试自动关联最近的触发元素，但行为不可靠，实际项目中应始终用popover="manual" - 容器必须是静态内容承载元素（推荐
<div>），不能是<button>、<a>等可交互元素，否则可能被浏览器拒绝启用 - 即使 DOM 结构正确，若未调用
target.showPopover()，容器仍保持隐藏状态，和普通display: none无异
showPopover() 报错 “is not a function” 怎么办
这是运行时兼容性检测缺失的典型表现。该方法只存在于 Chromium 系最新版，其他浏览器（包括 Safari 当前所有版本、Firefox 全系列）的 HTMLElement.prototype 上根本不存在该函数。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 必须提前检测：
if ("showPopover" in HTMLElement.prototype)，否则直接调用必报错 - 不要依赖
window.chrome或 User Agent 判断，它们可能被伪造或过时 - 服务端无法检测该 API，需在客户端 JS 中做运行时判断，并为不支持环境提供降级方案（如 fallback 到
<dialog>或自定义 modal）
popover 和 <dialog> 到底该选哪个
除非你明确只面向 Chrome/Edge 用户、且需求极轻量（比如纯提示类 tooltip），否则现阶段优先用 <dialog>。它支持 Safari 15.4+、Firefox 98+、Chrome 37+，API 更稳定，语义更清晰。
-
<dialog>自带模态遮罩、焦点管理、Esc 关闭、backdrop伪元素样式控制；popover连基础偏移定位（如“按钮下方 8px”）都不支持 -
popover不支持箭头、遮罩层点击关闭、嵌套、beforetoggle事件拦截等实用能力，而这些在真实产品中几乎必现 - 二者都不能替代 CSS 定位逻辑：如果弹出容器父元素有
transform或filter，都可能导致层叠上下文异常，弹层被截断或错位
popover，现在得把它当成一个“未来特性预埋点”，而不是生产环境首选。它的最大价值是统一原生弹层语义，但离成熟还有明显距离——比如 Safari 团队尚未宣布实现计划，Firefox 也未进入提案讨论阶段。 
