toggle 不是原生事件，dialog 无 toggle 事件；响应打开应靠 showModal() 后逻辑或 focusin，关闭应监听 close 事件；method="dialog" 表单可声明式关闭；手动 toggle 需维护状态变量而非依赖 open 属性。
toggle 不是 HTML 或 DOM 标准事件，也没有原生机制能“同步” dialog 的打开/关闭状态——试图监听或触发一个叫 toggle 的事件，只会得到 undefined 或报错。
别写 dialog.addEventListener('toggle', ...)
DOM 中根本不存在名为 toggle 的事件类型。浏览器不会在 showModal() 或 close() 调用时自动派发它。常见错误是把自定义逻辑封装成 toggleDialog() 函数后，误以为它会广播事件；或者看到某些 UI 库用了 toggle 方法名，就以为是原生行为。
- 想响应打开动作？监听
dialog:modalCSS 状态变化没用（它不触发事件），应改用showModal()调用后的同步逻辑，或靠focusin判断（因为showModal()会自动聚焦） - 想响应关闭动作？唯一可靠的是
dialog.addEventListener('close', handler)，它会在用户按 Esc、点 backdrop、调用close()时统一触发 - 不要用
dialog.open属性变化做监听：它在showModal()后立即变为true，但此时弹窗可能还没渲染完成；且close()后它变false，但这个变化也不派发事件
method="dialog" 表单提交才是真正的“开关式”交互
真正接近“toggle”语义的原生方案，是让表单自己控制 dialog 开闭：不是靠 JS 监听某个事件，而是靠 HTML 行为声明。
- 把
<form method="dialog"></form>套在<dialog></dialog>内部，任意<button type="submit"></button>点击即关闭弹窗（无需 JS 绑定） - 提交按钮的
value会自动赋给dialog.returnValue，比如<button value="confirm">确定</button>关闭后可读取dialog.returnValue === 'confirm' - 若需“打开”也走同一套逻辑，就得在外层按钮上显式调用
dialog.showModal()，无法仅靠表单属性触发——method="dialog"只管关，不管开 - 注意：该特性在 Safari ≤ 16.6 存在兼容问题，部分版本不触发关闭，需降级到手动
dialog.close()
手动模拟 toggle 状态管理要避开三个坑
如果你确实需要一个 JS 层面的“开关函数”，比如 toggleDialog(dialogEl)，务必确保它不只是简单判断 dialogEl.open 后分支调用 showModal() 或 close()。
立即学习“前端免费学习笔记（深入）”；
-
dialogEl.open在未调用任何方法前是false，但调用showModal()后它立刻变成true——这看似合理，可一旦用户按 Esc 关闭，open变回false，但此时dialog仍存在于 DOM，且下次showModal()仍有效；而如果之前用了remove()，再调用toggle就会报错Cannot read property 'showModal' of null - 别在
toggle函数里直接操作dialogEl.hidden = !dialogEl.hidden：这绕过模态栈，::backdrop不出现，Tab 键能穿出，Esc 无效 - 更安全的做法是始终维护一个状态变量，比如
let isDialogOpen = false，在showModal()后设为true，在close事件中设为false，toggle函数只基于该变量决策，而非读取 DOM 属性
最易被忽略的一点：Safari 对 dialog::backdrop 的点击事件支持极弱，e.target === dialog 在 Safari 里几乎永远不成立。所谓“点击遮罩关闭”的逻辑，在 Safari 中必须用额外透明层或坐标判断来兜底，不能依赖原生行为。
