hidden 不适合复杂标签页切换，因其不管理状态导致焦点丢失、组件未就绪、file input 数据清空、css 冲突、ssr 不一致及 canvas 内容丢失等问题；应改用 data-active + display 控制可见性并维护独立状态快照。
hidden 属性在复杂标签页切换中极易引发状态丢失、焦点错乱和表单数据意外提交，它根本不适合多视图共存场景。
为什么 el.hidden = true/false 在 Tab 切换里会丢输入内容？
hidden 只控制“是否渲染”，不接管“是否保留状态”——但它确实保留了表单值、scrollTop、video.currentTime等，看似安全。问题出在“多层嵌套+动态激活”的真实业务中：
- 若某个 Tab 内含
<textarea autofocus></textarea>，隐藏后再次显示时，浏览器不会自动恢复焦点（尤其 Safari），导致用户打字前必须手动点一下 - 若 Tab 内有第三方组件（如富文本编辑器），它们常依赖
connectedCallback或resize事件初始化；hidden不触发这些生命周期，组件可能卡在未就绪状态 - 当用
el.hidden = false显示一个曾被 hidden 的<input type="file">，其files列表始终为空——这是规范行为，无法绕过
hidden 和 data-active 混用时最常踩的 DOM 状态坑
很多团队想“兼顾语义和过渡”，于是写：<div hidden data-active="preview">，再用 JS 同时操作两者。结果是：
<ul>
<li>
<code>data-active 控制 CSS 类（比如 .tab-panel[data-active="preview"] { display: block; }），而 hidden 仍存在 → 浏览器按规范执行 display: none，样式类失效
el.hidden = false，再加 data-active，但 CSS 尚未生效（如异步加载），会出现短暂闪现或布局抖动hidden 当作响应式 prop 绑定（如 :hidden="!activeTab === 'preview'"），SSR 与 hydration 不一致时，el.hidden 值可能和实际 DOM 状态错位，el.hidden === false 却仍不可见SPA 多预览层（草稿/发布/对比）为何绝对不能靠 hidden 切换
hidden 是二值开关，不是状态容器。三个预览层需要同时驻留 DOM（否则 diff 对比、撤销操作、滚动位置同步全崩）：
- 用
el.hidden = true隐藏草稿层 → 它退出渲染树，但 DOM 节点仍在；可一旦你后续调用el.remove()清理“无用”节点（常见于某些框架的 cleanup 逻辑），草稿状态彻底丢失 - 若某层内有
<canvas></canvas>绘图上下文，hidden 后再显示，canvas.getContext('2d')返回的对象仍存在，但绘制内容已清空（部分浏览器行为），且无法恢复 - 多个
hidden元素共存时，document.querySelectorAll('[hidden]')会返回全部，但你无法从 DOM 上区分“当前禁用”和“初始就该隐藏”的节点 —— 缺乏状态标识，调试成本陡增
真正要解决复杂标签页的状态管理，得放弃用 hidden 做视图开关，转而用 data-active + CSS display 控制可见性，并为每个面板维护独立的 JS 状态快照。hidden 只该出现在表单字段级控制（比如临时屏蔽某个 <input> 提交），而不是视图组织层。
