ToggleEvent 仅在 中可靠触发，popover 不派发该事件且无 newState 属性；尝试读取 e.newState 会因事件类型错误而返回 undefined。
ToggleEvent 只在 <details></details> 上可靠触发，popover 根本不派发它——这是调试失败的最常见原因。
为什么 console.log(e.newState) 在 popover 里报 undefined
因为 popover 元素压根不会触发 ToggleEvent，它的事件对象是普通 Event，没有 newState 属性。你看到的报错不是写法问题，而是类型错误：试图从非 ToggleEvent 实例读取只属于 ToggleEvent 的属性。
- 检查元素是否为
<details></details>：只有它原生支持toggle事件 +newState - 确认监听的是
toggle（不是click或beforetoggle） -
beforetoggle事件虽可用于popover，但其事件对象仍是Event，无newState - 别用
document.querySelector('popover')—— 这个选择器无效；正确写法是[popover]或带 ID 的#myPopover
如何安全地在控制台验证 toggle 状态变化
不要依赖单一日志输出判断状态，尤其在异步或快速连点场景下。用组合式日志 + DOM 快照更可靠：
- 在
toggle事件回调里同时打印e.newState和e.target.open，二者应始终一致 - 加前缀便于过滤：
console.log('[details]', e.newState, e.target.open) - 用
console.table()查看多个<details></details>元素的当前状态：console.table([...document.querySelectorAll('details')].map(d => ({ id: d.id, open: d.open }))) - 避免在
console.log()里直接展开 DOM 元素后读.innerHTML—— 控制台显示的是实时引用，可能已变
popover 状态调试只能靠 :popover-open + 属性轮询
popover 没有 newState，但你可以用 CSS 伪类和 JS 属性双保险来跟踪状态：
立即学习“前端免费学习笔记（深入）”；
- 用
getComputedStyle(el).getPropertyValue('display')判断是否可见（注意：:popover-open不影响 computed style） - 监听
toggle事件后立即查el.hasAttribute('open')——popover="manual"下该属性会同步更新 - 对
popover="auto"，需结合:popover-open伪类 +MutationObserver监听open属性变更 - 别用
setTimeout(() => console.log(el.open))做“等待”——状态更新是同步的，延迟只会引入误判
真正容易被忽略的点是：浏览器对 popover 的支持仍处于实验阶段，Chrome 125+ 才稳定支持 beforetoggle，而 Safari 完全不支持该事件。调试时务必先 if ('onaftertoggle' in document.createElement('div')) 做特性检测，而不是硬写监听逻辑。
