hidden是布尔属性，存在即隐藏，不占布局、不响应事件、不被屏幕阅读器读取；误用hidden="false"无效，应removeattribute；与aria-hidden混用会破坏可访问性；表单中带hidden的字段提交时被忽略；ie9不支持，需js polyfill。
hidden 属性不是 CSS 开关，它直接让元素退出渲染树——加了就真没了，不占位、不响应事件、不进可访问树。用错等于白写。
为什么加了 hidden 却没效果？
常见错误是把它当布尔值开关来用：
- 写成
hidden="false"或hidden="0"—— 无效。只要属性存在，浏览器就认为“隐藏”，值是什么根本不看 - 用
element.setAttribute('hidden', 'false')想“取消隐藏”——结果是加了个无效的hidden属性，元素反而被隐藏了 - CSS 覆盖了：写了
[hidden] { display: block; }，原生语义就被废掉
hidden 和 display: none 到底差在哪？
表面效果一样，但底层逻辑和影响不同：
-
hidden是语义化声明：“这内容当前不相关”，屏幕阅读器会跳过整个子树；display: none是样式指令，辅助技术是否忽略取决于实现细节 -
hidden在表单中会让<input>、<select></select>等控件彻底被忽略（FormData里没有，form.elements里查不到）；display: none同样会导致提交丢失，但这是副作用，不是设计意图 -
el.hidden = true不触发重排（reflow），比el.style.display = "none"更轻量；但别指望它能动画，它不支持过渡
什么场景该用 hidden，什么不该？
它适合「状态无关、纯条件性移除」，不适合「视觉控制」或「交互保留」：
- ✅ 服务端直出时默认隐藏某模块，等 JS 加载后再根据权限决定是否
removeAttribute('hidden') - ✅ Web Component 内部状态同步：组件
unmounted时设hidden，比手动切 class 更语义清晰 - ❌ 想做折叠面板动画——
hidden一加就消失，没法过渡；该用max-height+overflow: hidden或opacity+visibility - ❌ 需要键盘焦点或屏幕阅读器感知的“视觉隐藏”内容（比如展开前的详情摘要）——该用
aria-hidden="true"+ CSS 隐藏，而不是hidden
IE9 及更早版本不支持，怎么办？
现代项目基本不用兼容 IE9，但如果必须支持：
- 别指望自动降级：
hidden在 IE9 完全被忽略，元素照常显示 - 可用 polyfill，但注意风险：它本质是往
style里塞display: none，可能和你原有 CSS 冲突 - 更稳妥的做法是：服务端判断 UA，对老 IE 直接不输出对应 DOM，或用 class 控制显隐
真正容易被忽略的是语义边界——hidden 声明的是“内容不相关”，不是“我暂时不想让你看见”。一旦你开始想“等会儿还要 show 出来”，就该怀疑是不是选错了工具。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
