ToggleEvent 不能用于同步多个 popover 状态，因其仅适用于 元素，未被浏览器扩展至 popover；popover 状态变更由 showPopover()/hidePopover() 驱动，不触发标准事件，需用 :popover-open 伪类或集中状态管理替代。
ToggleEvent 不能用于同步多个 popover 的状态——它根本不会在 popover 元素上触发。
为什么监听 toggle 事件对 popover 完全无效
ToggleEvent 是专为 <details></details> 设计的原生事件，其 newState 属性只在 <details></details> 的 toggle 事件中存在。所有主流浏览器（Chrome 114+、Firefox 119+、Safari 17.4+）均未将该事件扩展至 popover。试图给 <div popover> 添加 <code>addEventListener('toggle', ...) 不会报错，但永远不会执行回调。
- 错误现象：
console.log(e.newState)在 popover 上始终是undefined - 真实触发机制：popover 状态变更由
showPopover()、hidePopover()或popovertarget属性驱动，不派发任何标准 DOM 事件 - 替代方案只有：轮询
element.matches(':popover-open')，或依赖自定义事件/状态管理
用 :popover-open 伪类实时检测单个 popover 状态
这是目前唯一可靠、无 JS 的 CSS 级状态感知方式，适用于样式响应和简单逻辑分支。
- 检测是否打开：
element.matches(':popover-open')返回布尔值，可在 JS 中安全调用 - 注意兼容性：仅支持 Chrome 114+、Edge 114+、Firefox 119+；Safari 尚未实现（截至 2026 年 10 月）
- 不要用
getComputedStyle(element).display判断——popover 是渲染层控制，不改变display值 - 示例：
const drawer = document.getElementById('drawer'); if (drawer.matches(':popover-open')) { console.log('抽屉已展开'); }
同步多个 popover 的推荐做法：统一状态管理 + 显式调用
没有“自动同步”机制，必须手动协调。最健壮的方式是放弃事件监听，改用集中状态 + 显式控制。
立即学习“前端免费学习笔记（深入）”；
- 用一个
Map或对象记录每个 popover 的当前状态：const popoverStates = new Map([['menu', false], ['search', false]]) - 所有开关操作都走同一套函数：
togglePopover(id)，内部先更新 Map，再调用el.showPopover()或el.hidePopover() - 避免混用
popovertarget和 JS 控制——二者会竞争状态，导致:popover-open检测失准 - 如果必须响应外部点击关闭，监听
popoverhide事件（仅 Chrome/Edge 支持），并同步更新 Map
Ant Design 等封装库的同步思路不可直接迁移到原生 popover
像 Ant Design 的 visible + onVisibleChange 是组件内建的状态桥接逻辑，底层仍依赖 React 生命周期和事件代理。原生 popover 没有等价的受控属性或回调钩子。
-
popover="manual"不等于“受控模式”——它只是禁用自动触发，但不提供状态变更通知 -
popovertargetaction="toggle"是声明式行为，无法拦截或监听“即将切换” - 想做到类似体验，必须自己封装一层：用
button触发自定义函数，再由该函数统一调度多个showPopover()/hidePopover()
真正容易被忽略的一点：:popover-open 的匹配结果不是实时同步的——它依赖渲染帧，若在 showPopover() 后立刻调用 matches，可能仍返回 false。需要配合 requestAnimationFrame 或 popovershow 事件（如有）做延迟判断。
