hidden 属性只需存在即生效，正确写法为 <div hidden> 或 el.hidden = true；它使元素退出可访问性树、不参与表单提交、不可动画且具继承性，非视觉补丁。
直接写 hidden 就生效，不需要值、不接受 hidden="false"、不能靠 CSS 覆盖来“取消”，也不该用 setAttribute 操作——它是个语义开关，不是样式补丁。
hidden 属性怎么写才真正隐藏元素
它只认“存在与否”，浏览器解析到标签上带这个属性，就立刻跳过渲染管线。常见错误写法反而让它“看似失效”：
-
<div hidden="false">—— 依然隐藏，布尔属性不看值 -
<div hidden style="display: block">—— 内联样式优先级高，覆盖了 hidden 的默认样式 -
<div hidden>✅ 正确，最简写法 -
<div hidden="">✅ 也有效，但冗余
必须加兜底 CSS：[hidden] { display: none !important; }，否则服务端直出时可能闪一下（FOVC）。
JS 操作 hidden 的正确姿势
DOM 元素原生支持 hidden 作为布尔属性读写，这是唯一推荐方式：
立即学习“前端免费学习笔记（深入）”；
- 隐藏：
el.hidden = true（自动添加属性） - 显示：
el.hidden = false（自动移除属性，不是设成空字符串或"false"） - 判断状态：
if (el.hidden)—— 返回true或false，不是字符串 - 别用：
el.setAttribute('hidden', '')或el.removeAttribute('hidden')，冗余且在 SSR 场景下和初始状态判断不一致
如果之前用 el.style.display = 'none' 隐藏过，记得先清内联样式：el.style.display = ''，再设 el.hidden = false，否则仍不可见。
hidden 和 display: none 的关键区别在哪
视觉相似，但底层行为完全不同：
-
hidden让元素退出可访问性树 —— 屏幕阅读器跳过、tab焦点无法进入；display: none不保证这点，旧工具可能仍尝试解析 -
hidden影响表单序列化 ——<input name="token" value="abc" hidden>在FormData中完全消失；display: none下它依然参与提交 -
hidden无法动画 ——transition: display无效，@keyframes里也不能控制；需要过渡效果得先移除hidden，再加opacity类做渐变 -
hidden具有继承性 —— 父元素设了hidden，所有后代（包括伪元素）一并隐藏；display: none无此语义保证
真正容易被忽略的是：如果元素已用 display: contents 或 position: absolute 脱离文档流，hidden 依然生效 —— 它不依赖布局上下文，而是在 HTML 解析阶段就决定跳过整个节点。
哪些地方绝对不能用 hidden
它不是万能显隐工具，边界非常明确：
- 不要用在需要动画/过渡的场景 —— 它本身不可动画，强行加 transition 会失败
- 不要混用
<input type="hidden">—— 名字像，但完全无关：type="hidden"是表单控件，用于提交数据；hidden是全局属性，控制渲染 - 不要指望它阻止资源加载 ——
<img hidden src="xxx">中的图片仍会下载 - 别在 Vue/React 条件渲染逻辑里同时用
v-if和hidden—— 语义冲突，容易导致 DOM 状态不一致 - Shadow DOM 内部不会自动继承宿主元素的
hidden，需手动透传或监听
核心记住一点：hidden 是“逻辑上不该存在”，不是“暂时看不见”。一旦用了，就得接受它带来的语义后果 —— 可访问性剔除、表单排除、JS 交互失效。想保留焦点、保持输入值、支持动画？换方案，别硬扛。
