showModal() 不触发 toggle 事件，因 HTML 中不存在标准 toggle DOM 事件；dialog 元素仅可靠派发 close 事件，需手动封装 toggle 逻辑并基于 dialogEl.open 属性判断状态。
showModal() 不触发 toggle 事件，也没有原生的 “toggle 事件” 可与之配合。这是个常见误解——HTML 中根本不存在名为 toggle 的标准 DOM 事件。
为什么 document.addEventListener('toggle', ...) 无效
浏览器不派发 toggle 事件。哪怕你手动调用 dialogEl.showModal() 或 dialogEl.close()，都不会自动触发该事件。试图监听它只会静默失败，控制台也无报错，容易误以为“逻辑没跑通”。
-
dialog元素只派发open（非标准，部分浏览器实验性支持）和close两个可信赖的事件 -
toggle是某些框架（如 Vue 的v-show）或自定义 hook 里的语义词，不是 DOM 规范术语 - 若在代码里写了
element.addEventListener('toggle', handler)，handler 永远不会执行
真正该监听的事件是 close
close 是 <dialog></dialog> 唯一稳定、跨浏览器支持的用户交互完成事件（Chrome 99+、Edge 99+、Firefox 110+），它在以下任一情况发生时触发：
- 调用
dialogEl.close() - 用户按 Esc
- 点击
::backdrop（蒙层）
示例：
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
立即学习“前端免费学习笔记（深入）”；
const dialogEl = document.getElementById('myDialog');
dialogEl.addEventListener('close', () => {
console.log('弹窗已关闭，可重置表单或释放资源');
// 注意：此时 dialogEl.open === false，但元素仍在 DOM 中
});
想实现“显示/隐藏切换”，得自己封装 toggle 逻辑
没有现成的 toggleModal() 方法，必须手动判断状态再调用对应方法：
- 检查
dialogEl.open属性（布尔值），而不是依赖事件 - 首次调用
showModal()前确保元素已挂载，否则报Cannot read property 'showModal' of null - 不要用
hidden或display: none模拟关闭——这会破坏模态栈和焦点管理
简洁封装示例：
function toggleDialog(dialogEl) {
if (dialogEl.open) {
dialogEl.close();
} else {
dialogEl.showModal();
}
}
// 绑定到按钮
document.getElementById('toggleBtn').addEventListener('click', () => {
toggleDialog(document.getElementById('myDialog'));
});
关键点在于：所有“切换”行为都得基于 dialogEl.open 状态判断，而非等待某个不存在的 toggle 事件。别被名字带偏——showModal() 和 close() 是单向操作，状态同步靠属性，不靠事件。
