show() 不该用于登录框等需阻断操作的场景，它仅设 open 属性，不加遮罩、不禁用背景、不锁焦点、不响应 esc；真正模态必须用 showmodal()。
show() 方法根本不是用来做模态框的
直接说结论：show() 不该用在登录框、确认弹窗这类需要阻断用户操作的场景。它不加遮罩、不禁用背景、不锁焦点、不响应 Esc——本质上就是个带 open 属性的 position: absolute 浮层，和手写一个 div 差别不大。
为什么调用 show() 后点击背景还能操作页面
这是设计使然，不是 bug。浏览器规范明确：只有 showModal() 才会启用模态状态（禁用背景焦点、拦截 Tab、渲染 ::backdrop）。show() 只是把 open 属性设为 true，其他什么也不干。
-
show()不会添加::backdrop，所以你看到的“灰色遮罩”其实是自己写的 CSS，不是原生行为 - Tab 键仍可自由切换到页面其他元素，
show()不触发任何焦点捕获逻辑 - Esc 键完全无效，也不会触发
cancel或close事件 - 旧版 Safari（如 15.3）甚至不支持
show()，调用即报TypeError: dialog.show is not a function
show() 的真实适用场景和注意事项
它只适合轻量、非阻断式浮层，比如工具提示、快捷操作面板、悬浮帮助框——这些场景不需要锁页面、也不依赖 backdrop 或 Esc 关闭。
- 必须确保
dialog已挂载到 DOM，且在DOMContentLoaded后调用，否则document.querySelector('dialog').show()会报null - 它不会自动居中，得靠 CSS 定位：
dialog { position: absolute; top: 20px; right: 20px; }，不能依赖浏览器内置居中逻辑 - 如果父容器有
transform或will-change，Safari 下show()渲染位置可能错乱甚至不可见 - 别试图用
show()+ 手动监听click模拟模态行为——焦点管理、Tab 顺序、键盘可访问性全得自己补，复杂度远超直接用showModal()
show() 和 showModal() 混用会出什么问题
两者互斥，不能混用同一个 dialog 实例。一旦调过 showModal()，再调 show() 不会生效；反之亦然。更关键的是状态残留：
- 已用
showModal()打开的dialog，调show()不会关闭 backdrop，也不会释放焦点锁定 - 已用
show()显示的dialog，再调showModal()会抛DOMException: The element is already open - 关闭必须统一用
close()，不能靠删open属性——否则showModal()的 backdrop 不消失，焦点仍被锁住
showModal()。而 show() 是个容易让人误以为能“简化实现”的陷阱——它省掉的代码，最后都得用可访问性、兼容性和交互细节来还。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
