dialog 标签需手动控制显隐、交互与样式：必须设置 open 属性或调用 showModal() 才显示；点击遮罩关闭需监听 click 并判断 target；表单提交要防默认行为；样式、居中、焦点等均需自行处理。
dialog 标签不是“写完就能弹”的组件，它默认不显示、不拦截交互、不响应点击遮罩关闭——你必须手动调用方法、监听事件、补样式，否则页面上什么都不会出现。
dialog 不显示？检查 open 属性和 JS 调用时机
原生 dialog 元素默认隐藏，即使 DOM 中存在也不会渲染到视口。光写 是没用的。
- 要初始显示，必须加
open属性： - 更常用的是 JS 控制：确保 DOM 加载完成后再调用
showModal()，否则会报Cannot read property 'showModal' of null -
showModal()会自动添加open属性；show()不会锁背景，也极少用于真正对话框场景 - Safari 15.4+ 才支持，旧版需 polyfill 或降级为
div+ 手动实现
点击遮罩层不关闭？必须手动监听 click 并判断 target
dialog 的 backdrop（灰色遮罩）默认不触发任何行为，规范里就没定义“点背景关闭”这个逻辑——这不是 bug，是设计如此。
- 监听
click事件后，只在e.target === dialog时调用close()，才能准确识别点击发生在遮罩上 - 点内部子元素（比如按钮、输入框）时，
e.target是那个子元素，不会触发关闭 - Safari 17.6 及更早版本中，
e.target始终是dialog，无法区分点击位置，需 fallback 到坐标判断或禁用该交互 - 别忘了只对
showModal()启用此逻辑；show()没有 backdrop，监听无效
表单提交后 dialog 消失或刷新？避免默认 form 行为
在 dialog 里放 很常见，但直接用 type="submit" 会导致整个页面 reload，看起来像“弹窗闪退”，其实是表单默认提交了。
- 给
form添加method="dialog"属性，提交时会自动触发close()并设置dialog.returnValue，不刷新页面 - 若需异步提交（如 fetch），必须在 submit 事件中调用
e.preventDefault() - 注意
enctype默认是application/x-www-form-urlencoded，传 JSON 时需显式设为application/json - 关闭后记得重置表单状态，否则下次打开还是上次填的内容
样式难看、居中错位、焦点丢失？这些都得自己写
dialog 几乎没有跨浏览器一致的默认样式：Chrome 给圆角阴影，Firefox 是透明块，Safari 甚至不居中——而且 Safari 在父元素有 transform 或 will-change 时可能完全不渲染。
- 强制居中需重置定位：
dialog { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } -
::backdrop可自定义灰层样式，但 Safari 目前（2026年4月）仍不支持该伪元素 - 首次
showModal()后焦点可能没落到 dialog 内，需setTimeout(() => dialog.focus(), 0)强制 - 关闭后 document.activeElement 可能为空，建议在
close事件中手动document.body.focus()
最易被忽略的一点：dialog.close() 只移除 open 属性，DOM 节点还在。反复打开又不清理，页面里会堆满不可见的 dialog 元素——尤其在单页应用中，得自己决定是复用还是 remove()。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
