dialog 必须用 showmodal() 启动才具备模态功能，否则仅是隐藏的 dom 元素；open 属性仅使其可见但无遮罩、无焦点锁定、esc 不响应；需为 body 直接子元素，监听 click 判断 target 关闭，form 提交需 method="dialog" 或 preventdefault。
dialog 标签不是“写完就能弹”的替代方案，它本身就是原生模态框——但必须用 showModal() 启动，否则跟 div 没区别。
为什么写了 dialog 却完全不显示？
因为 dialog 默认 display: none 且不参与布局渲染，DOM 中存在但浏览器跳过绘制，getBoundingClientRect() 返回空值。光加 open 属性（如 <dialog open></dialog>）只让它“可见”，不激活模态逻辑——没遮罩、Tab 键能穿透、Esc 不响应、点击背景也不关。
- 必须在
DOMContentLoaded后获取元素，否则调用showModal()报Cannot read property 'showModal' of null - 别用
dialog.hidden = false或dialog.style.display = 'block'，这绕过原生焦点管理，Tab会直接跳出弹窗 -
dialog必须是的直接子元素，否则 Safari 和部分 Chrome 版本下::backdrop不渲染
如何正确监听 backdrop 点击关闭？
::backdrop 不是 DOM 节点，没有 class，也不冒泡带来源信息。点击它时，事件目标是 dialog 元素本身，而不是某个“遮罩层”节点。
- 标准写法：
dialog.addEventListener('click', e => { if (e.target === dialog) dialog.close(); }); - Safari 15.4–16.3 有兼容问题：
e.target可能始终是body，需 fallback 坐标判断，例如e.clientX - 别给
dialog设pointer-events: none，这会让showModal()的焦点锁定彻底失效
form 提交后页面刷新怎么办？
<form></form> 在 <dialog></dialog> 内仍按默认行为提交，触发整页 reload，dialog.close() 根本没机会执行。
- 最简解法：给
form加method="dialog"属性，提交后自动关闭并设dialog.returnValue，不刷新 - 需要异步处理（如
fetch）时，必须在submit事件中调用e.preventDefault()，再手动dialog.close() - 不要依赖
dialog.close()的返回值做逻辑分支——Safari 不支持其 Promise 返回，需用close事件监听
为什么 show() 基本不用？
show() 只让 dialog 可见，不加遮罩、不禁背景交互、不锁焦点、不响应 Esc——它适合悬浮提示这类非阻断场景，但对确认框、表单弹窗毫无意义。
-
showModal()才真正接入浏览器模态栈：禁底层交互、捕获 Tab、响应 Esc、支持returnFocus() -
show()后仍需手动处理滚动锁定、键盘焦点、点击穿透等，工作量不比手写div少 - 直接写
<dialog open></dialog>等价于调用show()，不是模态行为
真正麻烦的不是怎么写 dialog，而是怎么让它“像模态框一样工作”：焦点不能漏、Esc 必须生效、backdrop 点击要可靠、form 提交不能刷新——这些细节全靠 showModal() 触发的底层机制支撑，绕开它，就等于放弃原生能力。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
