details的toggle事件不能内联绑定ontoggle，必须用addEventListener('toggle')监听，且不冒泡；JS修改open属性不触发该事件；读取状态应优先用hasAttribute('open')而非event.target.open。
details的toggle事件不叫ontoggle，也不能内联绑定
很多人搜“ontoggle”想写 <details ontoggle="track()">，这行不通。浏览器根本不支持 ontoggle 这个内联属性，也不会触发回调。必须用 addEventListener('toggle', ...) 显式监听，且只对用户交互生效（点击 <summary> 或按空格/回车），JS 修改 open 属性不会触发。
- 错误写法：
<details ontoggle="console.log('x')">—— 完全静默，无任何输出 - 正确注册：
details.addEventListener('toggle', handler) - 别在父元素上委托监听 ——
toggle事件不冒泡（规范如此，不是 bug） - IE 和旧版 Edge（≤18）完全不支持，Safari ≤15.4 对事件触发有延迟或丢失，需降级
埋点逻辑里必须读取 event.target.open，但不能立刻读
toggle 事件触发时，event.target.open 已同步更新为新状态，但某些场景（如 SSR 渲染 + JS 补充监听）下，DOM 更新可能未完成，直接读可能拿到旧值。最稳妥的做法是延迟读取，而不是依赖事件对象里的字段（e.detail 始终是 undefined）。
- 推荐写法：
setTimeout(() => console.log(details.open), 0)或requestAnimationFrame(() => {...}) - 不要写：
if (e.target.open) { track('expand') }—— 在 Safari 15.4 或部分安卓 WebView 中可能误判 - 更健壮判断：
details.hasAttribute('open')，它反映的是真实渲染层状态，比布尔属性更可靠
多个details共存时，避免重复埋点和状态干扰
如果页面有多个 <details>，比如 FAQ 列表或配置面板，每个都绑独立监听器没问题，但要注意：用户一次只能操作一个，埋点应带上下文标识，否则数据无法区分来源。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 给每个
<details>加data-id：<details data-id="faq-1"> - 埋点参数至少包含：
{ event: 'details_toggle', id: details.dataset.id, open: details.hasAttribute('open') } - 不要在
toggle回调里调用details.open = true/false—— 这会引发二次状态变更，导致循环或冲突 - 若需联动（如单选折叠），应在回调中手动控制其他
details的open属性，但**不触发它们的 toggle 事件**（因为 JS 设置不会派发事件）
兼容性兜底：旧浏览器没toggle事件怎么办
Safari ≤15.4、Chrome ≤101、Firefox ≤98 都存在 toggle 事件不触发或延迟问题。不能只靠特性检测 'toggle' in Event，得结合运行时行为验证。降级方案不是模拟动画，而是换一套可访问的 DOM 结构。
立即学习“前端免费学习笔记（深入）”；
- 检测是否可用：
if ('addEventListener' in details && 'toggle' in Event)，但更准的是details.addEventListener('toggle', () => {}, { once: true });看是否执行 - 降级监听：
summary.addEventListener('click', () => { setTimeout(() => track(...), 0); })，同时补监听keydown（空格/回车） - 绝对不要用
style.display控制显隐 —— 这会让屏幕阅读器失效、toggle事件永远不触发、键盘焦点错乱 - 微信 X5 内核（尤其 v8.0.4x 以下）压根不解析
<details>，此时必须用<div role="region" aria-expanded>+ 手动管理状态
sendTrack({ event: 'details_toggle', ... })，把采集、去重、失败重试、用户 ID 注入都封装进去——细节太多，但核心就一条：别信 open 属性的即时值，也别指望所有浏览器都按规范走。 
