默认隐藏，必须设置open属性或调用showmodal()才显示；仅show()为非模态浮层，不锁背景、不响应esc；safari兼容性差，需降级处理。
<dialog></dialog> 默认不显示，不加 open 属性或不调用 showModal() 就等于没写 —— 它不是“写了就能弹”，而是“写了还得手动开门”。
dialog 不显示？先查 open 属性和 showModal() 调用时机
很多人写完 <dialog><p>内容</p></dialog> 刷新页面却什么也看不到，第一反应是 CSS 问题。其实只是忘了“开门”。
-
open是布尔属性，写成<dialog open></dialog>、<dialog open=""></dialog>或<dialog open="open"></dialog>效果一样 - 用 JS 控制时，**别手动增删
open属性**：它只控制显隐，不触发模态行为（比如背景失焦、Esc 关闭） - 首次显示请用
dialog.showModal()，而不是dialog.show()—— 后者只是浮层，不锁背景、不拦截 Tab、不响应 Esc - 如果 JS 在 DOM 加载前就执行（比如 script 写在 head 里），
document.getElementById("myDialog")会返回null，导致调用失败
点遮罩层不关闭？必须手动监听 click 并判断 target
<dialog></dialog> 的 backdrop 点击默认无任何行为，这不是 bug，是规范如此。你不能指望它像 jQuery UI 那样点背景自动关。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 正确监听方式：
dialog.addEventListener('click', e => { if (e.target === dialog) dialog.close(); }); - Safari 15.4+ 才支持
e.target === dialog判断 backdrop；旧版 Safari 或某些 WebView 中，e.target可能始终是，需 fallback 到坐标检测或dialog.hasAttribute('open')+event.composedPath()辅助判断 - 不要用
dialog.addEventListener('click', () => dialog.close())—— 这会让点击内部按钮也关闭对话框 - 注意：Safari 中
dialog::backdrop样式支持不全，background: rgba(0,0,0,0.5)可能失效，建议额外加一层<div class="backdrop"> 模拟 <h3>表单提交后 dialog 消失？preventDefault() 忘了加</h3> <p>在 <code><dialog></dialog>里放<form></form>很常见，但直接点type="submit"按钮会触发表单默认提交，导致整个页面刷新 —— dialog 看似“闪退”，其实是页面 reload 了。- 给 form 绑定
submit事件并调用e.preventDefault() - 若用
fetch提交，记得设置form.enctype = 'application/json'或手动构造数据，否则FormData在部分浏览器中可能不按预期工作 - 推荐用
method="dialog"的 form：提交后自动触发dialog.close()，且不刷新页面，但仅适用于简单确认/取消场景（如<button value="confirm">确定</button>） - 关闭后记得重置表单状态（如清空 input、恢复按钮文字），否则下次打开还是上次的脏数据
兼容性差、样式乱？别硬刚，默认行为必须覆盖
<dialog></dialog>在 Chrome、Firefox、Safari 中默认样式差异极大：Chrome 居中带阴影，Firefox 透明无边框，Safari 甚至默认不居中 —— 不加 CSS 几乎不可用。- 基础定位重置必不可少：
dialog { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } -
z-index是浏览器内置的：模态dialog.showModal()总在最顶层，你写的z-index: 9999完全无效；非模态show()才受 CSS 层叠影响 - Safari 中若父容器有
transform或will-change，<dialog></dialog>可能错位或消失（渲染层 bug），可尝试给 dialog 加transform: none !important - 检测模态能力：
'showModal' in HTMLDialogElement.prototype，不支持时降级为 CSS + JS 模拟 focus trap 和 backdrop，别用已停止维护的 polyfill 库
最易被忽略的一点：dialog 的焦点管理是“半自动”的 ——
showModal()会尝试聚焦第一个可聚焦子元素，但在 Safari 中经常失败，得加setTimeout(() => dialog.focus(), 0)强制补救；否则用户 Tab 键一按就飞出 dialog，体验直接断裂。 - 给 form 绑定
