hidden 是语义声明而非视觉开关，元素带该属性即逻辑上不存在；写无效值（如 hidden="false"）、内联样式覆盖、缺css兜底、框架劫持或错误js操作均会导致失效。
hidden 不是“隐藏开关”，它是语义声明 —— 元素一旦带这个属性，就等于告诉浏览器：“它当前逻辑上不该存在”，不是“别让我看见”。
hidden 属性为什么写了却没效果
常见现象是加了 hidden，元素照常显示。根本原因不是浏览器不支持，而是 CSS 覆盖或写法错误：
- 写了
hidden="false"或hidden="0"—— 无效。只要属性存在（哪怕值是空字符串），就触发隐藏；hidden是布尔属性，不接受任何值 - 内联样式强制覆盖：
<div hidden style="display: block"> —— 浏览器仍执行 <code>hidden的语义逻辑，但你的style优先级更高，结果就是“不隐藏” - 没加 CSS 兜底规则：
[hidden] { display: none !important; }—— SSR 场景下 JS 还没执行时，HTML 已解析渲染，可能闪现内容 - 用了自定义组件库或框架（如 Vue/React）的属性劫持，把
hidden当普通 prop 处理，没透传到真实 DOM - 隐藏：
el.hidden = true—— 等价于添加hidden属性 - 显示：
el.hidden = false—— 等价于完全移除该属性（不是设成""或"false"） - 检查状态：
console.log(el.hidden)—— 返回true或false，不是字符串 - 别用
el.setAttribute('hidden', '')或el.removeAttribute('hidden')：能工作，但冗余、易错，且和初始 HTML 状态判断不一致（比如服务端已渲染hidden，JS 设el.hidden = false后，el.hasAttribute('hidden')仍返回true） -
hidden影响表单提交：<input name="token" value="abc" hidden>在FormData或form.elements中完全消失；display: none下它依然参与序列化 -
hidden让整个子树退出可访问性树 —— 屏幕阅读器跳过，焦点无法进入；display: none的可访问性行为依赖浏览器实现，不保证一致 -
hidden无法动画：transition: display无效，@keyframes里不能控制；需要过渡效果必须配合opacity或max-height类，再用hidden做最终开关 -
hidden不受父容器布局影响（比如 flex/grid 容器不会“修复”它的隐藏）；display: none可能被某些旧版 Safari 或复杂 CSS 层叠意外绕过 - ✅ 适用：
<dialog hidden></dialog>（模态框未打开）、<p hidden class="error"></p>（验证失败前的错误提示）、SSR 占位内容（hydration 后替换） - ❌ 不该用：
tab面板切换（焦点和autofocus行为紊乱）、折叠面板（需要高度过渡）、加载中按钮（应配aria-busy而非直接消失） - ❌ 别混用：
hidden和aria-hidden="true"—— 前者已让整棵子树退出可访问树，后者冗余且可能冲突（比如aria-hidden="false"会误导屏幕阅读器） - ⚠️ 注意兼容：IE9 及更早版本完全忽略
hidden；现代项目基本不用考虑，但若需支持，得用class+ CSS 替代，不能靠 polyfill
JS 操作 hidden 属性的正确姿势
DOM 元素原生支持 hidden 作为布尔属性读写，这是最直接、最可靠的方式：
hidden 和 display: none 的关键行为差异
视觉相似，但底层机制和副作用完全不同：
什么场景该用 hidden，什么不该
它只适合「内容当前逻辑无关」的场景，不是视觉控制工具：
真正容易被忽略的是语义边界：你写 hidden 的那一刻，不是在“藏东西”，而是在声明“这东西现在不存在”。一旦你心里想的是“等会儿还要 show 出来”，就得停下来问问自己 —— 是不是该换种方式。
