dialog 默认不渲染且需调用 showModal() 激活；必须置于 body 直接子级，确保首个可聚焦元素存在，并手动处理 backdrop 点击关闭。
dialog 标签不是写完就能弹的“自动弹窗”，它默认不渲染、不占布局、不响应交互——必须调用 showModal() 才能真正激活模态行为，否则页面上根本看不到它。
为什么写了 dialog 却完全没显示？
因为 dialog 默认 display: none，连 DOM 渲染都跳过，不是“隐藏”而是“未激活”。光加 open 属性只影响初始状态，且会强制一打开就弹出，违背用户触发原则。
- 错误做法：
<dialog open></dialog>+ 后续设dialog.open = false→ 弹窗仍在，open属性只是初始化开关，不是控制接口 - 正确做法：只写
<dialog id="myDialog"></dialog>，等用户点击后执行document.getElementById('myDialog').showModal() - 常见报错
Cannot read property 'showModal' of null：脚本执行早于 DOM 解析，需确保在DOMContentLoaded后获取元素，或把 script 放在</body>前
showModal() 和 show() 的关键区别
showModal() 是唯一推荐用于模态框的打开方式；show() 几乎无实际用途，它不加遮罩、不锁焦点、不拦截 Tab 键，仅适合悬浮提示类轻量场景。
-
showModal()自动添加::backdrop、禁用背景交互、聚焦第一个可聚焦子元素（如<button>）、支持 Esc 关闭 -
show()不触发::backdrop，也不限制焦点，Tab可穿透到背景页，不符合模态语义 - Firefox 目前不渲染
::backdrop（仅逻辑阻塞），Chrome/Edge 111+、Safari 17.4+ 支持，但样式需手动补全
点击遮罩关闭必须手动监听，且 Safari 有兼容陷阱
规范明确不定义“点击 backdrop 关闭”行为，所以原生不支持——这不是 bug，是设计选择。必须自己监听并判断点击位置。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 基础写法：
dialog.addEventListener('click', e => { if (e.target === dialog) dialog.close(); }); - Safari 15.4–16.3 存在
e.target始终为body的 bug，需 fallback 判断坐标：e.clientX < dialog.getBoundingClientRect().left - 别给
dialog设pointer-events: none，这会让showModal()的焦点锁定彻底失效 - 不想点遮罩关闭？直接加
oncancel="event.preventDefault()"即可阻止默认关闭行为
结构与样式容易被忽略的硬性要求
dialog 的渲染逻辑依赖浏览器内置定位机制，一旦嵌套在非 body 直系容器中，就可能错位、被截断或 backdrop 失效。
- ✅ 正确位置：
<body><dialog id="dlg"></dialog></body>—— 必须是body的直接子元素 - ❌ 风险结构：
<main><dialog></dialog></main>或<div style="position: relative"><dialog></dialog></div>，父级transform、overflow: hidden、z-index都会干扰 - 默认无边框、无 padding，Safari 下可能完全不可见，至少加：
dialog { border: 1px solid #ccc; padding: 1em; } - 要加遮罩动画？
dialog::backdrop支持@keyframes，但 Firefox 不渲染，得降级为 JS 控制 class 切换
最常被绕过的点是焦点管理：如果 dialog 内第一个子元素是 <h3> 或 <div>，showModal() 会静默失败，Tab 键直接跳出模态框——必须确保首个可聚焦元素存在，或手动 focus()。
