hidden 属性逻辑上移除元素，不占空间、不可交互、不被读屏识别；失效主因是 CSS 覆盖 display 值，JS 应用需用 el.hidden = true/false，禁与 display: none 混用，适用场景限于内容相关性声明而非视觉控制。
hidden 属性不是“让元素不显示”的视觉开关，而是告诉浏览器“这个元素当前逻辑上不该存在”——它会直接从渲染树中剔除，不占空间、不可交互、不被读屏软件识别。用错方式，它就完全失效。
为什么 hidden 有时不起作用
最常见的失效原因是 CSS 强制覆盖。哪怕只有一条 [hidden] { display: block; } 或内联样式 style="display: flex"，hidden 就会被绕过。
- 检查开发者工具里该元素的 computed styles：如果
display不是none，说明被 CSS 覆盖了 - 全局重置样式（如 normalize.css）或 UI 框架（如 Bootstrap）可能带
[hidden]规则，需手动覆盖为display: none !important -
<template></template>、<script></script>等本身不渲染的元素加hidden无意义
hidden 在 JS 中必须这样操作
不能把它当 CSS 属性用，element.style.hidden = true 是无效写法；也不能传字符串值。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 隐藏：
el.hidden = true（推荐）或el.setAttribute('hidden', '') - 显示：
el.hidden = false（注意：不是'false'字符串）或el.removeAttribute('hidden') - 判断状态：
el.hidden返回布尔值，比el.hasAttribute('hidden')更可靠（后者在初始 HTML 带hidden时，即使 JS 设为false仍可能返回true）
和 display: none 混用会出问题
两者机制冲突，容易导致“明明设了 el.hidden = false，元素还是看不见”。
- 如果之前用
el.style.display = 'none'隐藏过，再设el.hidden = false不会自动清除那个内联display，元素依然不可见 - 反过来，如果元素已有
hidden，再用 JS 设置el.style.display = 'block'，它会立刻显示——因为 CSS 优先级高于hidden的默认行为 - 表单控件（如
<input hidden>）在提交时会被完全忽略；而display: none的<input>仍参与表单序列化
哪些场景真该用 hidden，哪些不该
它不是动画开关，也不是通用显隐工具，适用边界很明确。
- 适合：服务端直出时默认隐藏（如未登录用户菜单）、
<section></section>步骤切换、调试提示块、需要彻底退出可访问性树的内容 - 不适合：做淡入淡出（
hidden无法过渡）、频繁切换（每次触发重排）、依赖offsetHeight计算布局的场景（它返回 0）、需要保留占位的 tooltip 锚点 - 特别注意：
hidden和aria-hidden="true"别混用——前者已让整棵子树退出可访问性树，后者纯属冗余甚至引发语义冲突
hidden 的核心价值不在“怎么藏”，而在“为什么藏”：它是对内容相关性的声明，不是对样式的修补。一旦你开始想给它加过渡、覆盖 display、或者和 aria-hidden 打配合，大概率说明选错了方案。 
