hidden 是布尔属性，存在即生效，不解析值；正确写法仅需 <div hidden>，hidden="false" 仍隐藏；需 CSS 兜底 *[hidden] { display: none !important; } 防 FOVC。
hidden 是布尔属性，存在即生效，不接受值；它不是 CSS 开关，而是语义化声明“该内容当前不应呈现”，浏览器会直接跳过渲染、焦点和可访问性树。用错写法或混用样式，它就“看似失效”。
hidden 属性怎么写才在 HTML 中真正生效
只认“有没有”，不解析值。哪怕写成 hidden="false" 或 hidden="0"，元素照样被隐藏——浏览器压根不看右边的字符串。
-
<div hidden>✅ 推荐，最简、语义清晰 -
<div hidden="">✅ 空字符串等价于存在，但冗余 -
<div hidden="false">❌ 仍隐藏，别被字面迷惑 -
<input type="hidden" hidden>⚠️ 多余，type="hidden"和hidden完全是两回事
特别注意：hidden 对 <template>、<script> 这类本就不渲染的元素无意义。
为什么加了 hidden 页面还是闪一下（FOVC）
服务端直出 <section hidden>，但 CSS 没加载完或 JS 尚未执行 el.hidden = false，用户会先看到内容再消失——这是“Flash of Visible Content”，根源在浏览器渲染时机早于 JS 执行。
立即学习“前端免费学习笔记（深入）”；
- 根本解法只有 CSS 兜底：
[hidden] { display: none !important; }，必须加!important，且放在基础样式最末或@layer base中 - 别指望 JS 补救：首屏渲染发生在 JS 加载前，CSS 是唯一可靠防线
- 如果本该“初始可见”，就别用
hidden，改用 class 控制，比如<div class="hidden">+.hidden { display: none; }
JS 动态控制 hidden 的正确姿势
DOM 元素原生支持 hidden 作为布尔属性读写，这是唯一推荐方式。绕开它用 setAttribute 或 style.display 都容易翻车。
- 隐藏：
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 和 display: none 混用时最容易踩的坑
两者语义和行为完全不同，强行混用会导致“设了却看不见”或“取消后仍不显示”。
-
hidden是 HTML 语义声明，影响渲染树、可访问性树、表单序列化；display: none只是 CSS 布局控制 - 如果元素已有
style="display: none"，再执行el.hidden = false，它依然不可见——内联样式优先级高于hidden触发的默认样式 - 想做淡出动画？
hidden本身不能过渡。得先el.hidden = false，再加class触发opacity或transform过渡，最后才设el.hidden = true收尾 - 表单中带
hidden的<input>不会提交；若需“视觉隐藏但参与提交”，得用type="hidden"，而不是hidden属性
真正容易被忽略的是：hidden 在 shadow DOM 中不自动继承，自定义组件内部需显式响应宿主上的 hidden 属性，否则“看似没生效”。
