toggle事件仅在用户点击summary或按Enter/空格键时触发，JS修改open属性不会触发；其newState属性仅details元素支持，popover不支持；e.detail始终为undefined，应直接读e.target.open。
details 的 toggle 事件只在用户点击时触发，JS 修改 open 不会派发
很多人写 detailsElement.open = true 后监听 toggle，结果回调根本没执行——这是最常踩的坑。该事件**仅响应用户点击 <summary></summary> 的行为**，不响应任何 JS 对 open 属性的读写操作。
- ✅ 正确触发场景：鼠标点击
<summary></summary>、空格键/回车键聚焦后按 Enter - ❌ 不触发场景：
details.open = true、details.setAttribute('open', '')、details.removeAttribute('open') - ⚠️ 注意：
toggle事件不冒泡，无法用事件委托；也不支持内联绑定（ontoggle属性无效）
ToggleEvent.newState 只对 有效，popover 完全不支持
ToggleEvent 接口目前**仅被 <details></details> 元素原生实现**，它的 newState 属性（值为 "open" 或 "closed"）是判断最终状态最语义明确的方式。而 popover（无论 popover="auto" 还是 popover="manual"）**根本不派发 ToggleEvent，也没有 newState 属性**。
- ✅
<details></details>中可直接用：e.newState === 'open' - ❌
<div popover> 中访问 <code>e.newState会报undefined，且事件对象类型是普通Event，不是ToggleEvent - ? 替代方案：popover 状态需靠
:popover-open伪类 +getComputedStyle()或轮询popover.open属性 - ✅ 推荐写法：
if (e.target.open) { /* 展开逻辑 */ } - ❌ 错误写法：
if (e.detail === 'open') { ... }（永远不成立） - ⏱️ 不需要
setTimeout或requestAnimationFrame延迟读取，状态已就绪 - ✅ 检测方式：
'onbeforetoggle' in HTMLDetailsElement.prototype不可靠；更准的是typeof details.addEventListener === 'function' && 'toggle' in Event - ⚠️ 降级建议：对不支持的浏览器，改用监听
click并手动判断summary是否被点击，再读取details.open - ? 统一控制逻辑：把所有开闭操作收口到一个函数（如
setDetailsOpen(details, isOpen)），内部统一设置属性 + 触发自定义事件，避免原生和 JS 控制混用导致状态脱节
toggle 事件回调里读 e.target.open 是安全的，但别依赖 e.detail
事件触发时机是 DOM 更新完成后同步执行的，所以回调中读取 e.target.open 总是准确反映当前状态。但要注意：e.detail 在所有浏览器中都为 undefined，它不是标准字段，不要试图从中取值。
兼容性差，旧版 Safari 和 IE 完全不支持 toggle 事件
Safari 15.4 之前、Firefox 98 之前、Chrome 101 之前，toggle 事件要么静默失败，要么根本不存在。IE 全系不支持。如果你的项目需覆盖这些环境，不能只靠原生事件。
立即学习“前端免费学习笔记（深入）”；
实际使用中，最容易被忽略的是「JS 控制 open 属性不会触发 toggle」这个前提。一旦混用 click 监听、JS 赋值、toggle 事件三者，状态和副作用就会错位。务必先决定用哪一套机制：纯用户交互 → 用 toggle；纯 JS 控制 → 自己管理状态；混合场景 → 封装统一入口。
