hidden 属性是 dom 层级的逻辑剔除而非视觉隐藏，它使元素不渲染、不参与可访问性树和表单提交，且不支持动画或占位，需配合 css 兜底防 fovc。
hidden 属性不是“让元素看不见”的 CSS 替代品，而是向浏览器声明“这个内容当前逻辑上不该存在”——它会彻底移除渲染、跳过可访问性树、且不参与表单提交。
hidden 属性到底隐藏了什么
它不只是视觉隐藏：hidden 触发的是 DOM 层级的剔除，不是样式层的遮盖。一旦存在，元素：
- 不会出现在渲染树中 →
offsetHeight和getBoundingClientRect()恒为0 - 完全退出可访问性树 → 屏幕阅读器跳过，键盘 Tab 无法聚焦
- 从表单序列化中消失 →
<input type="text" name="token" hidden>在form.submit()或new FormData(form)中根本不会出现 - 所有后代节点（包括
::before/::after）一并不可见、不可交互
为什么写 hidden="false" 还是隐藏
hidden 是布尔属性，只认“存在与否”，不解析值。浏览器看到任何带 hidden 的标签，就立刻执行隐藏逻辑。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
<div hidden> ✅ 标准写法 <li><code><div hidden=""> ✅ 空字符串等价于存在 <li><code><div hidden="false"> ❌ 依然隐藏，值被忽略 <li> <code><input type="hidden" hidden>⚠️ 冗余且易混淆：type="hidden"是表单字段类型，和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不支持任何 CSS 动画或 transition，必须配合opacity或transform类手动控制，hidden只能作最终开关 - 需要保留占位空间（比如 tooltip 锚点、折叠面板预留位置）？
hidden会让布局塌掉，该用visibility: hidden或opacity: 0 - 想“视觉隐藏但提交表单字段”？
hidden会让字段彻底消失，该用style="position: absolute; left: -9999px"或sr-only类 - 混用
aria-hidden="true"？语义冲突——hidden已让整个子树退出无障碍树，再加 ARIA 属性只会误导屏幕阅读器
JS 控制 hidden 的正确姿势
别用 setAttribute 或 removeAttribute，DOM 元素原生支持 hidden 作为布尔属性读写：
哪些场景绝对不能用 hidden
它不是万能显隐开关，边界非常明确：
最容易被忽略的其实是首屏渲染时的 FOVC（Flash of Visible Content）：服务端直出 <section hidden></section>，但 CSS 还没加载完，用户会先看到内容再消失。唯一可靠解法是加兜底 CSS：[hidden] { display: none !important; }，放在基础样式最前或 @layer base 里——JS 补救永远晚于首次渲染。
