hidden 属性是语义化布尔开关，存在即跳过渲染、焦点和可访问性暴露，子节点同步失效；不可用于动画或保状态，需 DOM 共存+CSS 类控制；设 false 仍不可见常因 display: contents 或 CSS 覆盖；必须用布尔赋值，el.hidden = false 才移除属性。
hidden 属性不是 display: none 的快捷写法
它本质是语义化布尔开关：只要 hidden 属性存在，浏览器就彻底跳过该元素的渲染、焦点管理、可访问性暴露，且子节点一并失效。你不能靠它做过渡动画，也不能靠它保留输入值或滚动位置——这些都得靠 DOM 共存 + CSS 类控制。
常见错误现象：el.hidden = false 后元素仍不可见，大概率是因为它或某个祖先有 display: contents（这个值会让 hidden 失效），或者被 visibility: hidden / opacity: 0 等 CSS 覆盖。检查 el.offsetParent 是否为 null 是最直接的判断方式。
JS 控制 hidden 必须用布尔赋值，不能设字符串
el.hidden = true 等价于添加 hidden 属性；el.hidden = false 等价于完全移除该属性。设 el.setAttribute('hidden', 'false') 或 hidden="false" 无效——HTML 规范只认“是否存在”，不解析值。
容易踩的坑：
- 用
el.hasAttribute('hidden')检查状态，可能在服务端已输出hidden的情况下返回true，即使 JS 已执行el.hidden = false；应统一用el.hidden读取 - 设
el.hidden = false后元素仍不可见？可能是内联样式残留：el.style.display = ''才能清掉style="display: none" - 表单中带
hidden属性的<input>不会提交——真要隐藏但参与提交，得用position: absolute; left: -9999px
SSR/ hydration 场景下 hidden 的初始同步必须前置
服务端模板中加 hidden 是防闪动的好做法，但客户端 JS hydration 前，必须确保 CSS 中已有 [hidden] { display: none !important; }。否则首屏会短暂闪出本该隐藏的内容。
更关键的是状态一致性：
- 别在 Vue/React 里混用
v-if/{condition &&和hidden——条件渲染删 DOM，hidden只藏 DOM，两者语义冲突，极易导致状态错乱 - 若用
data-active驱动多预览层切换，需手动补一句el.hidden = !el.matches('[data-active]')，仅当需要向屏幕阅读器明确声明“此区块当前完全不适用”时才加 - 反过来不行：别监听
el.hidden变化去更新data-active，因为hidden不触发transitionend，也无中间态可监听
hidden 切换会触发 layout，但比 DOM 重建轻量
设 el.hidden = true/false 会强制浏览器重新计算渲染树分支，触发一次 layout（重排）。但它省去了 HTML 解析、节点创建、事件绑定、connectedCallback 等完整生命周期开销，适合视图共存场景（如编辑器的「源码/预览」双面板）。
前提是结构干净：
- 两个视图必须是同一父容器下的兄弟节点，不能嵌套
- 父容器不能有
display: flex配合position: absolute导致子项脱离流 - 避免全局 CSS 写了
[hidden] { display: block !important; }这类覆盖规则
真正难处理的从来不是“怎么切”，而是“切完之后状态还在不在”——hidden 本身不保存任何状态，它只是个语义开关。输入框内容、Canvas 绘图、滚动位置这些，全靠 DOM 不销毁来维持。这点一旦忽略，所有优化都白搭。
