toggle事件非兼容性问题而是用法错误：仅用户点击summary时触发，须用addEventListener('toggle')监听，ontoggle等写法无效；检测应使用createElement后addEventlistener是否报错。
details 元素的 toggle 事件根本不是“浏览器兼容性问题”，而是“你写错了”
很多人搜“HTML toggle 事件兼容性”，结果卡在 Safari 不触发、Chrome 没反应、IE 报错——其实根本不是兼容性问题，是误以为 toggle 是个像 click 那样可内联或自动冒泡的通用事件。它只在用户点击 <summary></summary> 时由浏览器派发，且必须用 addEventListener('toggle', ...) 显式监听，写成 ontoggle、onToggle 或绑到 <summary></summary> 上全都不生效。
如何正确检测 toggle 事件是否可用
别查 typeof HTMLDetailsElement.prototype.ontoggle——它永远是 undefined，这个属性压根不存在。真正该测的是：浏览器是否支持 toggle 类型事件本身，以及是否能被 addEventListener 注册。
- 最简检测：
typeof window.Event === 'function' && 'toggle' in window.Event - 更稳妥（推荐）：
const details = document.createElement('details'); details.addEventListener('toggle', () => {}, { once: true });—— 如果没报错，说明支持 - 旧版 Safari（'toggle' in Event 不够，必须实测绑定
JS 修改 open 属性时 toggle 事件不触发，这不是 bug 是设计
这是最容易踩的坑：details.open = true、details.setAttribute('open', '')、甚至 details.toggleAttribute('open') 都不会触发 toggle 事件。它只响应用户交互（鼠标点击、空格键、回车键），不响应 JS 状态变更。
- 如果你需要统一处理所有开闭逻辑（比如存 localStorage、联动其他组件），必须自己封装函数，比如
setDetailsOpen(detailsEl, isOpen) - 不要在监听器里依赖
e.detail——它始终是undefined；要用e.target.open或e.newState（值为'open'或'closed'） - 事件不冒泡，无法委托到父容器；想批量监听多个
<details></details>，得用循环绑定或 MutationObserver 监听 DOM 变化后补绑
降级方案不能只靠 CSS，得有 JS 回退路径
当 toggle 事件不可用时，<details></details> 本身仍可工作（open 属性控制显隐），但你失去了状态变化的感知能力。这时候不能只加个 @supports (display: details) {...} 就完事。
立即学习“前端免费学习笔记（深入）”；
- 用
details.hasAttribute('open')做初始状态判断，再配合click事件监听<summary></summary>，手动模拟切换逻辑 - 对
<summary></summary>绑定keydown，捕获空格/回车，避免键盘操作失焦 - IE11 及以下不支持
<details></details>，需用<div class="accordion"> + 手动 JS 控制，此时连 <code>open属性都不存在，得完全重写真正难的不是写监听器，而是区分清楚：哪些行为必须由用户触发（
toggle）、哪些可以由 JS 主动驱动（open属性）、哪些状态必须跨两者同步（比如本地存储）。混用却不隔离，才是兼容性崩塌的起点。
