hidden属性表示内容逻辑上不存在，使元素退出渲染树、可访问性树和表单序列化；它只认属性存在与否，不解析值；需配合兜底CSS防止FOVC；JS应通过el.hidden=true/false控制；不可用于过渡、占位或表单提交场景。
hidden 属性不是“让元素看不见”的快捷样式开关，而是告诉浏览器“这个内容当前逻辑上不该存在”——只要它在 DOM 上，元素就彻底退出渲染树、可访问性树和表单序列化链路。
hidden 属性怎么写才真正生效
它只认“存在与否”，不解析值。哪怕你写 hidden="false" 或 hidden="0"，元素照样被隐藏。
-
<div hidden>✅ 推荐，语义清晰、符合规范 -
<div hidden="">✅ 空字符串等价于存在，但略冗余 -
<div hidden="false">❌ 依然隐藏，浏览器忽略值 -
<input type="hidden" hidden>⚠️ 没必要——type="hidden"和hidden完全不同用途
为什么加了 hidden 页面还是闪一下
服务端直出 <section hidden>，但 CSS 还没加载完或 JS 尚未执行 el.hidden = false，用户会先看到内容再消失——这是“Flash of Visible Content”（FOVC）。
- 根本原因：浏览器解析 HTML 时立即渲染，
hidden的默认样式（[hidden] { display: none }）可能被延迟应用 - 必须加兜底 CSS：
[hidden] { display: none !important; }，放在基础样式最末或@layer base里 - 别指望 JS 来“补救”——首屏渲染发生在 JS 执行前，CSS 是唯一可靠防线
JS 动态控制 hidden 的正确姿势
DOM 元素原生支持 hidden 作为布尔属性读写，这是唯一推荐方式。
立即学习“前端免费学习笔记（深入）”；
- 隐藏：
el.hidden = true（自动添加属性） - 显示：
el.hidden = false（自动移除属性，不是设成字符串"false"） - 判断状态：
if (el.hidden)—— 别用el.hasAttribute('hidden')，它在 SSR 场景下不可靠 - 切记：如果之前用
el.style.display = 'none'隐藏过，得先清内联样式：el.style.display = ''，再设el.hidden = false，否则仍不可见
哪些地方绝对不能用 hidden
它不是万能显隐工具，边界非常明确。
- 要做淡入淡出？
hidden不支持任何 CSS 过渡，得配合opacity或transform类手动控制，hidden只做最终开关 - 需要保留占位空间（比如 tooltip 锚点）？
hidden会让offsetHeight恒为 0，布局会塌掉 - 想“视觉隐藏但提交表单字段”？
<input hidden name="token">在form.submit()或new FormData(form)中完全消失，该用style="position: absolute; left: -9999px" - 混用
aria-hidden="true"？语义冲突——hidden已让整个子树退出无障碍树，再加 ARIA 属性只会让屏幕阅读器困惑
最容易被忽略的点是：hidden 的生效不依赖 CSS，但它的视觉表现可以被 CSS 覆盖；它不阻止资源加载（比如 <img hidden src="a.jpg"> 仍会请求图片），也不影响 SEO（搜索引擎仍能索引内容），但它确实会让辅助技术彻底无视该节点——用之前，先确认你真需要的是“逻辑剔除”，而不是“视觉折叠”。
