不支持嵌套，必须作为 直系子元素；多步骤表单应使用单 内动态切换 ，禁用非当前步骤字段需清除 required 并重置 validity 状态，safari 存在渲染缺陷需降级处理。
<dialog></dialog> 标签本身不支持嵌套，也不能直接“嵌套多步骤表单”——这不是写法问题，而是浏览器渲染层的硬性限制。你不能把一个 <dialog></dialog> 放进另一个已打开的 <dialog></dialog> 里，showModal() 第二次调用必然失败。
为什么 dialog 内放 fieldset 步骤会出问题
常见错误是把整个多步骤 <form></form> 塞进 <dialog></dialog>，再试图在其中用 <fieldset></fieldset> 切换步骤。这看似合理，但实际踩中两个坑：
-
<dialog></dialog>必须是的直系子元素，一旦它被包在<form></form>或其他有transform/overflow的容器里，居中失效、遮罩不显示、焦点错乱全都会发生 -
<fieldset disabled></fieldset>在<dialog></dialog>内部时，部分浏览器（尤其是 Safari）对 disabled 状态的继承处理异常，键盘 Tab 仍可能跳入已禁用字段 - 更隐蔽的是：如果用户按 Esc 关闭
<dialog></dialog>，而当前步骤有未校验的required字段，form.checkValidity()可能意外返回false，导致后续逻辑中断
真正可行的组合：dialog + 单 form + 动态 fieldset 切换
不是让多个 <dialog></dialog> 嵌套，而是用一个 <dialog></dialog> 容器，内部只放一个 <form></form>，所有步骤都用 <fieldset></fieldset> 组织，通过 JS 控制显隐和校验范围：
- 确保
<dialog></dialog>直接写在下，不要套在任何表单或布局容器里 - 每个步骤对应一个
<fieldset data-step="1"></fieldset>，且必须是<form></form>的直系子元素 - 切换步骤时，用
document.querySelectorAll('fieldset').forEach(fs => fs.hidden = true)隐藏非当前项，而不是靠 CSSdisplay: none—— 后者不影响表单提交逻辑 - 每次进入新步骤前，手动清除所有
required属性，再仅给当前data-step下的控件加回：el.setAttribute('required', '') - “下一步”按钮必须是
<button type="button"></button>，否则回车会触发表单默认提交
dialog 内按钮点击触发外层 form 提交的陷阱
如果你把 <dialog></dialog> 写在 <form></form> 标签内部（哪怕只是 DOM 结构上嵌套），里面的 <button></button> 默认类型是 submit，点“取消”也会提交外层表单：
- 复现条件：
<form><dialog><button id="cancelBtn">否</button></dialog></form> - 根本原因：HTML 规范规定，不在
<form></form>外的<button></button>默认参与其最近的父<form></form>提交 - 修复方式：给所有
<dialog></dialog>内的按钮显式声明type="button"，或者监听click事件并立即调用event.preventDefault() - 更安全的做法：把
<dialog></dialog>移到底部，完全脱离<form></form>DOM 树，用 JS 拿到表单引用后操作
Safari 下的致命渲染缺陷必须提前规避
Safari 17.6（当前主流版本）对 <dialog></dialog> 的实现仍有严重 bug，尤其在多步骤场景下极易触发：
- 只要
<dialog></dialog>的任意祖先元素有transform、will-change或overflow: hidden，弹窗可能瞬间消失、错位到左上角、或焦点无法进入输入框 - 动态切换
<fieldset></fieldset>时若涉及 CSS 动画（如opacity过渡），Safari 渲染管线容易卡死，页面白屏 - 检测方案：运行
'showModal' in HTMLDialogElement.prototype和'dialog' in document.createElement('html')，任一为false就应整套降级为<div class="modal"> 方案 <li>降级时别忘了补：手动管理 <code>tabindex、aria-modal="true"、Esc 键监听、遮罩点击关闭、以及关闭后恢复上一个焦点元素
最常被忽略的一点：多步骤表单的“返回”操作，不能只靠 JS 切换 hidden，必须同步重置该步骤内所有字段的 validity 状态，否则用户返回上一步再点“下一步”，浏览器原生校验可能仍报错。这得调用 input.setCustomValidity('') 手动清空。
