popovername 和 popovertarget 是 Chromium 114+ 原生支持的弹窗属性，Firefox/Safari 完全不识别；popovername 需唯一且为字符串，仅原生按钮类元素支持 popovertarget，无 polyfill，需运行时检测并降级。
popovername 和 popovertarget 是 HTML 原生弹窗 API 的核心属性，但它们目前仅在 Chromium 114+（Chrome 114、Edge 114、Opera 100+）中稳定支持，Firefox 和 Safari 完全不识别这两个属性，直接忽略——这意味着用它们写的弹窗在非 Chromium 浏览器里根本不会触发。
popovername 必须配合 popover 元素使用，且不能重复
一个页面中多个 <div popover> 元素可以共存，但每个的 popovername 值必须唯一；否则后续同名的 popover 会覆盖前一个，导致 popovertarget 点击后打开错误的弹层，甚至无响应。
-
popovername只接受字符串，不支持变量插值或表达式（如 Vue/React 模板中写:popovername="id"会失效，必须用原生 DOM 操作动态 setAttribute） - 未设置
popovername的 popover 默认属于匿名组，无法被popovertarget关联 - 浏览器不会校验名称是否已存在，冲突时静默覆盖，调试时需手动检查
document.querySelectorAll('[popovername]')
popovertarget 触发行为依赖 button 或具有 role="button" 的元素
popovertarget 属性只对语义化按钮类元素生效：原生 <button>、<input type="button">、<input type="submit">，或显式设置了 role="button" 且绑定了 click 事件的 <div>/<span>。其他标签（比如 <a> 或普通 <div>）即使写了 popovertarget，点击也完全没反应。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 若用
<a href="#">，必须加role="button" preventDefault()，否则会触发跳转并中断 popover 流程 -
popovertarget的值必须严格匹配目标 popover 的popovername，大小写敏感，空格也不允许 - 不支持通过 JS 动态修改
popovertarget属性来切换目标——改了也不会重新绑定，需先hidePopover()再手动showPopover()
没有 fallback 机制，Polyfill 几乎不可行
不同于 dialog 元素有较成熟的 polyfill（如 dialog-polyfill），popover 的底层依赖于新的呈现层逻辑和焦点管理规则，目前没有任何主流 polyfill 能模拟其行为。试图用 CSS + JS 模拟会出现焦点丢失、Esc 键不关闭、popoveranchor 不跟随滚动等问题。
立即学习“前端免费学习笔记（深入）”；
- 检测支持性只能靠
'popover' in HTMLDivElement.prototype，不能只查popovername属性是否存在 - 服务端 UA 判断不可靠，必须客户端运行时检测，并为不支持环境降级为
dialog或自定义 modal - SSR 渲染时若直接输出
popover标签，在 Safari 中会被当作未知元素丢弃，可能破坏 DOM 结构
真正棘手的地方在于：它看起来像一个“开箱即用”的标准方案，但实际落地时，你得为 40% 以上的用户（Safari 用户 + 旧版 Chrome 用户）准备一整套替代逻辑，而且这套逻辑无法复用 popover 的任何样式或交互状态——open 属性、togglePopover() 方法、锚点定位等全是独占的，没法桥接。
