dialog元素内button type="submit"不触发表单submit事件，因模态上下文隔离导致浏览器忽略原生提交；需用onsubmit或addEventListener拦截并手动处理提交逻辑。
dialog 元素默认不支持表单自动提交，必须手动拦截
点击 <dialog> 里的 <button type="submit"> 不会触发表单 submit 事件——因为 <dialog> 是模态上下文隔离的，浏览器会忽略其内部表单的原生提交行为。这不是 bug，是规范定义的行为。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给表单加
onsubmit="event.preventDefault(); handleAjaxSubmit();"或用addEventListener('submit', ...)拦截 - 确保
<form>在<dialog>内部，且未被 Shadow DOM 包裹（否则事件监听可能失效） - 不要依赖
form.action自动跳转，所有提交逻辑必须显式写在 JS 中
showModal() 后无法直接 focus 输入框？得等渲染完成
调用 dialog.showModal() 是同步的，但浏览器实际渲染和焦点管理是异步的。立即 input.focus() 很可能失败，尤其在 Safari 和旧版 Chrome 中。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
setTimeout(() => input.focus(), 0)是最简单可靠的兜底方式 - 更稳妥的做法是监听
dialog:aftertoggle事件（注意：目前仅 Chrome/Edge 支持，Firefox 尚未实现） - 如果用
dialog.open属性控制显隐（非 modal），则需自行管理焦点链和inert属性
Ajax 提交后关闭 dialog 的正确时机
dialog.close() 必须在收到服务器响应后调用，但不能只看 fetch().then()——网络成功不代表业务成功。常见错误是把 dialog.close() 写在 finally 块里，导致接口报错（如 400、500）时 dialog 也关了。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 只在明确的业务成功路径下调用
dialog.close()，比如响应体含{ success: true } - 对失败响应（
response.ok === false或自定义 error 字段），应在页面内显示错误提示，保持 dialog 开放 - 避免在
fetch().catch()里直接dialog.close()，除非你确定这是用户主动取消或网络彻底不可达
dialog 兼容性与回退方案要提前处理
Firefox 直到 115 才支持 <dialog>，Safari 15.4+ 才有 showModal()，且都不支持 dialog::backdrop 样式穿透。生产环境不能只靠 CSS 降级。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
"showModal" in HTMLDialogElement.prototype检测原生支持 - 不推荐用 polyfill（如 dialog-polyfill），它依赖 MutationObserver + 强制重排，容易和现代框架冲突
- 更务实的做法：服务端判断 UA，对不支持的客户端返回传统
<div role="dialog">+ 手动管理aria-modal和焦点锁
真正麻烦的不是怎么关 dialog，而是怎么让键盘操作（Esc、Tab、Shift+Tab）在所有浏览器里都符合 WCAG 2.1 要求——这部分逻辑一旦漏掉，无障碍测试就过不了。
