hidden属性声明语义“内容当前不相关”，会彻底移除元素于渲染树、焦点流和可访问性树；误用包括设hidden="false"、CSS覆盖[hidden]、用于过渡动画；正确场景是服务端隐藏模块、Web Component卸载等，错误场景是需保留焦点或视觉隐藏但语义保留。
hidden 属性不是 display: none 的替代品
它不控制样式，而是声明语义：“这内容当前不相关”。只要 hidden 属性存在（哪怕写成 hidden="false"），浏览器就把它从渲染树中完全剔除——不占布局、不响应点击、不被屏幕阅读器读取、表单中带 hidden 的 <input> 根本不会进 FormData。
常见误用：
- 写
element.setAttribute('hidden', 'false')想“取消隐藏” → 实际是加了个无效但生效的hidden属性，元素反而被隐藏了 - 在 CSS 里写了
[hidden] { display: block; }→ 废掉原生语义，hidden失效 - 想给折叠面板加过渡动画 →
hidden一设即消失，无法过渡；该用max-height+overflow: hidden或opacity+visibility
什么时候该用 hidden，什么时候不该
关键看意图是不是“内容暂时不相关”，而不是“我暂时不想让你看见”。
✅ 推荐场景：
立即学习“前端免费学习笔记（深入）”；
- 服务端直出时默认隐藏某模块，等 JS 加载后根据权限调用
removeAttribute('hidden') - Web Component 卸载时同步 UI 状态：
el.hidden = true比切 class 更轻量、更语义清晰 - 条件性移除整块 DOM 子树，且无需键盘焦点或屏幕阅读器感知
❌ 错误场景：
- 需要保留焦点能力（比如模态框关闭后要恢复上一个焦点元素）→
hidden会让元素彻底退出焦点流 - 视觉隐藏但语义需保留（如“展开前摘要”）→ 该用
aria-hidden="true"+ CSS 隐藏（clip-path或position: absolute; left: -9999px） - IE9 及更早版本必须支持 → 它完全忽略
hidden，元素照常显示；polyfill 本质是塞display: none，易和现有样式冲突
hidden 和 el.hidden = true 的行为差异
el.hidden = true 是 DOM 属性操作，直接映射到 HTML 属性，不触发重排（reflow），比 el.style.display = "none" 更轻量。但它不支持 CSS 过渡，也不能动画。
注意点：
-
el.hidden = false不等于移除属性：它会把属性值设为空字符串，仍算“存在”，浏览器照样隐藏 → 必须用el.removeAttribute('hidden') -
el.hasAttribute('hidden')才是判断依据，别依赖el.hidden的布尔值做逻辑分支（因为el.hidden总是返回布尔值，不管属性值是什么） - 表单控件如
<select hidden>在form.elements中查不到，form.submit()也完全忽略它 —— 这是设计意图，不是 bug
与 aria-hidden 混用等于自废武功
hidden 已经让整个子树退出可访问树，再加 aria-hidden="true" 不仅多余，还会干扰辅助技术解析逻辑。尤其当父元素有 hidden，子元素又单独设 aria-hidden="false"，结果仍是不可访问 —— 因为 hidden 的语义优先级更高。
真正容易被忽略的是边界感：hidden 声明的是“内容不相关”，不是“我暂时不想让你看见”。一旦你心里冒出“等会儿还要 show 出来”这个念头，就得停下来问一句：这是状态切换，还是语义移除？选错工具，后面所有交互和无障碍补救都会变苦力活。
