原生 popover 需满足三重契约：可聚焦触发器、显式 popovertargetaction、顶层可见目标；仅支持可激活元素，禁用 div/span 直接使用，不支持嵌套，toggle 事件须提前绑定，激活依赖 UA 用户意图判定。
原生 popover 属性不是“加了就能用”的开关，它必须满足三重显式契约才能触发：可聚焦的触发器 + 显式动作声明 + 顶层可见的目标元素。缺一不可，且浏览器支持极不均衡。
popovertarget 必须作用在可激活元素上
浏览器只响应符合“激活行为（activation behavior）”的元素上的 popovertarget，比如 <button>、<a href>，或手动赋予交互能力的元素。普通 <div> 或 <span> 即使写了 popovertarget="x"，也会被静默忽略。
- 正确写法必须包含
tabindex="0"（使其可键盘聚焦）+role="button"（语义化声明为按钮） - 错误写法：
<div popovertarget="x">点我</div>—— 控制台无报错，但点击无效 - 禁用写法：
tabindex="-1"—— 无法通过键盘聚焦，Enter/Space 键不会触发 - 避免混用：
onclick和popovertarget同时存在，可能造成重复 show/hide 或状态错乱
popovertargetaction 是强制开关，不能省略
popovertarget 本身只是“指向”，真正驱动显示/隐藏的是 popovertargetaction。没有它，属性形同虚设。
- 必须显式写成
popovertargetaction="show"或"hide"，大小写敏感 - 目标
<div id="x" popover>的id必须与popovertarget值完全一致（区分大小写） - 若目标初始为
display: none或visibility: hidden，即使popover属性存在，也无法激活 —— 它必须是 DOM 中存在、未被 CSS 隐藏、且未被hidden属性禁用的元素
popover 元素必须处于 document 顶层，不支持嵌套
规范明确禁止在已显示的 popover 内部再触发另一个 popover。哪怕你把第二个 popover 移到 <body> 底下，只要第一个还开着，调用 showPopover() 就会抛出 DOMException: Cannot show a popover while another is already shown。
立即学习“前端免费学习笔记（深入）”；
- 多层菜单、级联选择器等场景，原生
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，是设计使然。
