原生 popover 需满足三重契约：可聚焦触发器、显式 popovertargetaction、顶层可见目标；仅支持可激活元素，禁用 div/span 直接使用，不支持嵌套，toggle 事件须提前绑定，激活依赖 UA 用户意图判定。

原生 popover 属性不是“加了就能用”的开关，它必须满足三重显式契约才能触发：可聚焦的触发器 + 显式动作声明 + 顶层可见的目标元素。缺一不可，且浏览器支持极不均衡。

popovertarget 必须作用在可激活元素上

浏览器只响应符合“激活行为（activation behavior）”的元素上的 popovertarget，比如 、，或手动赋予交互能力的元素。普通

或 即使写了 popovertarget="x"，也会被静默忽略。

• 正确写法必须包含 tabindex="0"（使其可键盘聚焦）+ role="button"（语义化声明为按钮）
• 错误写法：
  点我
  —— 控制台无报错，但点击无效
• 禁用写法：tabindex="-1" —— 无法通过键盘聚焦，Enter/Space 键不会触发
• 避免混用：onclick 和 popovertarget 同时存在，可能造成重复 show/hide 或状态错乱

popovertargetaction 是强制开关，不能省略

popovertarget 本身只是“指向”，真正驱动显示/隐藏的是 popovertargetaction。没有它，属性形同虚设。

• 必须显式写成 popovertargetaction="show" 或 "hide"，大小写敏感
• 目标
  的 id 必须与 popovertarget 值完全一致（区分大小写）
• 若目标初始为 display: none 或 visibility: hidden，即使 popover 属性存在，也无法激活 —— 它必须是 DOM 中存在、未被 CSS 隐藏、且未被 hidden 属性禁用的元素

popover 元素必须处于 document 顶层，不支持嵌套

规范明确禁止在已显示的 popover 内部再触发另一个 popover。哪怕你把第二个 popover 移到 底下，只要第一个还开着，调用 showPopover() 就会抛出 DOMException: Cannot show a popover while another is already shown。


财经HTML高端海报生成
复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP
下载
• 多层菜单、级联选择器等场景，原生 popover 无法胜任，必须降级为 JS 定位方案（如 floating-ui）
• popover="manual" 也不能绕过该限制 —— 手动调用同样受阻
• 所谓“嵌套气泡”，实际只能靠多次关闭/打开切换实现视觉效果，无法并存

toggle 事件监听必须早于首次 showPopover()

toggle 事件是唯一可靠的生命周期钩子，但它极度依赖注册时机。晚于第一次 showPopover() 调用绑定，就会漏掉首次状态变更。

• 推荐在 DOMContentLoaded 回调中第一时间绑定：el.addEventListener('toggle', handler)
• 动态插入的 popover 元素，必须在 append() 后、首次调用前立即绑定，不能等到 click 触发时才绑
• beforetoggle 仍属实验性，Chrome 120+ 可用，Firefox/Safari 不支持；且 e.preventDefault() 后需手动 hidePopover()，否则 UI 错位

最易被忽略的一点：popover 的激活逻辑深度耦合于浏览器对“用户意图”的判定（是否聚焦、是否按下了 Enter/Space），而不是单纯监听 click。这意味着，任何绕过 UA 激活流程的模拟（比如 element.click()）大概率失败 —— 它不是 bug，是设计使然。