<dialog> 是语义化容器而非自动弹窗，需 JS 调用 showModal()（模态行为）或 show()（仅显示）激活；showModal() 自带遮罩、焦点锁定与 Esc 关闭，show() 无此能力；点击遮罩关闭需手动监听并兼容 Safari 旧版。
dialog 标签不是“自动弹窗”，而是语义化容器
它本身不带任何交互逻辑，display: none 是默认状态，写了 <dialog></dialog> 就以为能弹出来？页面上什么都不会出现。它只告诉浏览器：“这里面是一段需要用户注意的临时内容”，比如确认操作、表单提交前提示、分享链接弹层——但要不要显示、怎么显示、怎么关，全靠你控制。
常见错误是直接写完 HTML 就去测试点击效果，结果按钮没反应。本质是漏了 JS 调用：showModal() 或 show() 才真正让它可见；加 open 属性只能初始显示，且不触发模态行为（比如背景禁用、Esc 关闭）。
showModal() 和 show() 的行为差异必须分清
showModal() 是你真正需要的“模态框”：它会自动加 ::backdrop 遮罩、禁用背景 Tab 键切换、聚焦第一个可聚焦子元素、响应 Esc 键关闭。而 show() 只是让 <dialog> 变成 visible，不加遮罩、不锁背景、不处理焦点——它更像一个浮动提示层，不是对话框。
- 用
showModal()时，event.target.returnValue可读取关闭时传入的值，比如dialog.close('confirmed') -
show()不触发cancel事件，也不支持::backdrop样式（因为没 backdrop） - Safari 15.4+ 才支持
showModal()；旧版 Safari 或部分安卓 WebView 中，需降级为show()+ 手动实现 backdrop 和 focus trap
点击遮罩关闭 dialog 必须手动监听，且判断 target
showModal() 的 ::backdrop 默认**不响应点击事件**，这不是 bug，是规范设计。很多开发者误以为点背景就能关，结果用户卡住。必须显式监听 click 并检查是否点在 backdrop 上：
立即学习“前端免费学习笔记（深入）”；
dialog.addEventListener('click', e => { if (e.target === dialog) dialog.close(); });
但要注意 Safari 15.4–16.3 存在兼容性问题：某些情况下 e.target 始终是 <body>，这时得 fallback 到坐标判断——检查 e.clientX / e.clientY 是否落在 dialog.getBoundingClientRect() 区域外。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
别给 dialog 设 pointer-events: none，这会破坏原生焦点锁定，导致键盘导航失效。
表单提交、焦点管理、样式重置全是易踩坑点
在 <dialog> 里放 <form> 很常见，但直接用 type="submit" 会导致整页刷新——因为表单默认提交到当前 URL。必须 event.preventDefault()，再用 fetch 或其他方式提交。
焦点管理失败往往是因为第一个子元素不可聚焦：<h3>、<p>、<div tabindex="-1"> 都不会被 showModal() 自动聚焦。确保第一个子节点是 <button>、<input> 或带 tabindex="0" 的元素；否则要手动 .focus()。
样式方面，各浏览器默认差异极大：Chrome 居中带阴影，Firefox 透明无边框，Safari 甚至不居中。必须重置定位：
dialog { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
另外，dialog 的 z-index 是浏览器内置的，你写的 CSS z-index 对模态态无效——这点调试时最容易让人困惑几小时。
