hidden是布尔属性，仅通过存在与否生效：正确写法为<div hidden>或<div hidden="">；JS应设el.hidden=true/false，不可用字符串或setAttribute；它使元素不参与表单提交和可访问性树。
直接用 hidden 属性就行，但必须写对、用对——写成 hidden="false" 或混用 style="display: none" 都会失效，而且 JS 控制时设 el.hidden = "true"（字符串）也会白忙活。
hidden 属性怎么写才合法有效
它是个布尔属性，浏览器只看“有没有”，不解析值：
- ✅ 正确写法：
<div hidden>内容</div>或<div hidden="">内容</div> - ❌ 错误写法：
<div hidden="true">、<div hidden="false">、<div hidden="0">—— 这些全都会隐藏，且不符合 HTML5 规范 - 服务端模板里直接输出
hidden即可，比如：<p hidden class="error">请输入邮箱</p>
JS 动态控制 hidden 的正确姿势
别碰 setAttribute 和 removeAttribute，原生 DOM 属性更稳：
- ✅ 隐藏：
el.hidden = true（自动添加hidden属性） - ✅ 显示：
el.hidden = false（自动移除hidden属性） - ✅ 检查状态：
if (el.hidden) { ... }—— 返回布尔值，不是字符串 - ⚠️ 别写：
el.hidden = "true"或el.setAttribute('hidden', 'false')，后者等于又加了一个hidden属性，元素还是隐藏 - ⚠️ 如果之前手动设过
el.style.display = 'none'，再设el.hidden = false也不会显示——得先清内联样式：el.style.display = ''
hidden 和 display: none 到底能不能混用
能写在一起，但逻辑上冲突，容易卡死：
立即学习“前端免费学习笔记（深入）”；
- ✅ 浏览器默认为
[hidden]应用display: none，所以你不需要额外写 CSS - ⚠️ 但如果你在 CSS 里写了
[hidden] { display: block !important; }，那hidden就彻底失效了（这是反模式） - ⚠️ 更常见的是：组件卸载时用 JS 设了
el.style.display = 'none'，后续靠el.hidden = false想恢复，结果没反应——因为内联display: none优先级高于 hidden 的默认样式 - ✅ 安全兜底建议：在基础 CSS 中加一行
[hidden] { display: none !important; }，防第三方样式或 SSR hydration 不同步导致首屏闪现
hidden 会影响表单提交和可访问性链路
这点最容易被忽略，尤其在表单开发中：
- ❌ 带
hidden的<input>、<select>、<textarea>在提交时会被完全跳过：new FormData(form)不包含它们，form.elements也遍历不到 - ✅ 想“视觉隐藏但参与提交”，不能用
hidden，改用type="hidden"（仅限input）或 CSS 位移（如position: absolute; left: -9999px） - ✅
hidden会让整个子树退出可访问性树，所以别再给它加aria-hidden="true"——语义重复且可能引发读屏软件困惑 - ⚠️ 后端永远不能信任前端是否传了某个字段：用户可绕过 DOM 直接构造请求，敏感字段校验必须后端兜底
hidden 的本质是“这个内容当前逻辑上不该存在”，不是“换个方式藏起来”。一旦开始需要动画、过渡、焦点管理或表单参与，就该换方案——它只适合声明式、静态、无交互的隐藏场景。
