hidden属性需用css兜底[hidden]{display:none!important}避免闪屏，所有步骤容器必须同级初始存在dom中，且用el.hidden布尔属性控制显隐，不可混用input type="hidden"。
hidden 属性在多步骤表单中怎么初始化才不闪屏
服务端直出 HTML 时直接写 hidden，但 JS hydration 前会先渲染再隐藏，用户看到“闪一下”——这不是 bug，是浏览器解析顺序导致的 FOVC（Flash of Visible Content）。
必须用 CSS 兜底：[hidden] { display: none !important; }，确保样式层优先生效。别依赖 JS 后续设 el.hidden = false 来“显示”，初始状态就该由 HTML + CSS 共同决定。
- 不要在
里只靠 JS 控制显隐，DOM 还没 ready 就操作会失败或延迟 - 所有步骤容器（如
<section id="step-1"></section>、<section id="step-2" hidden></section>）必须同级、初始就在 DOM 中，否则hidden不起作用 - 检查是否真隐藏：执行
document.getElementById('step-2').offsetParent，返回null才算成功；若返回元素，说明被 CSS 覆盖了
为什么用 hidden 而不是 display: none 切换步骤
display: none 切换触发重排（reflow），尤其步骤区域嵌套深、含大量 <input> 或动态校验提示时，卡顿明显；hidden 不触发重排，只做语义化隐藏，保留焦点、输入值、事件绑定，且更轻量。
但它有硬性前提：所有步骤节点必须是同级兄弟，且不能用 innerHTML 动态替换整个表单内容——否则 DOM 结构断裂，hidden 失效。
-
visibility: hidden和opacity: 0都不合适：visibility仍占布局空间，opacity允许 Tab 焦点穿透，造成焦点混乱 - Chrome DevTools 的 “Paint flashing” 可验证：切换步骤时大片红色闪烁，说明重绘频繁，
hidden能显著减少这类闪烁 - 性能差异不在“隐藏快慢”，而在“是否反复计算布局”——深层嵌套的步骤区域，重排代价指数上升
hidden 属性和 input type="hidden" 混用时的常见陷阱
两者名字像，但完全不是一回事：hidden 是通用 HTML 属性，控制任意元素是否渲染；<input type="hidden"> 是表单控件类型，用于提交不可见数据。混用时容易误判行为。
比如把 <section hidden></section> 当成“不会提交的容器”，结果里面漏写了 name 的 <input type="hidden">，后端就收不到字段；或者给 <input type="hidden"> 加了 disabled，它就彻底不提交了。
-
<input type="hidden">必须有name和value，缺一不可；type="hidden"必须小写、完整，写成type="HIDDEN"会降级为文本框 -
hidden属性本身不影响表单提交逻辑，但它包裹的<input>若被设为disabled，哪怕看不见，也不会提交 - Network → Form Data 面板里看不到字段？先查
name拼写、是否在<form></form>内、有没有被disabled、有没有外链form="xxx"但目标<form id="xxx"></form>不存在
JS 动态控制 hidden 步骤的正确写法
别用 setAttribute('hidden', '') 或 removeAttribute('hidden')，语义不清还容易出错。DOM 元素原生支持 el.hidden 布尔属性，这才是标准做法。
例如切换步骤：document.getElementById('step-1').hidden = true; document.getElementById('step-2').hidden = false;。读取状态也直接用 el.hidden，别用 el.hasAttribute('hidden')——后者在服务端已带 hidden 的情况下，即使 JS 设了 el.hidden = false，仍可能返回 true。
- 初始带
hidden的元素，el.hidden初始值就是true；没写的则是false - 设为
false后，hidden属性被完全移除，不是设成空字符串或"false" - 如果要用过渡动画，
hidden本身不能动画，得配合opacity或transform类手动控制，hidden只做最终开关
hidden 的 CSS 兜底。这两点没做到，后面所有 JS 控制和性能优化都白搭。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
