hidden 属性只需直接写 hidden 即可生效，是布尔属性，存在即隐藏，不接受值；它语义化隐藏元素，影响可访问性、表单提交和焦点，不可动画，且后代一并隐藏。
hidden 属性怎么写才生效
直接在元素上写 hidden 就行，不需要值、不用引号、不接受 hidden="false" 这类写法。只要属性存在，浏览器就立刻移除渲染、跳过可访问性树、阻止焦点进入。
常见错误写法：<div hidden="false">我依然被隐藏</div>——这仍然生效，因为 hidden 是布尔属性，“存在即隐藏”，值是什么根本不看。
-
<p hidden>初始不显示</p>✅ 正确 -
<span hidden="">也行</span>✅ 空字符串等价于存在 -
<input type="text" hidden name="token">✅ 表单中会完全忽略提交 -
<div hidden style="display: block">不会显示</div>✅ 内联样式被覆盖（除非你显式写了[hidden] { display: block !important }）
为什么加了 hidden 页面还是闪一下
服务端直出 HTML 时写了 <div hidden>，但 JS 在 hydration 前没来得及执行 <code>el.hidden = false，用户就会看到元素先出现再消失——这是典型的“FOUC（Flash of Unstyled Content）”变种，叫“Flash of Visible Content”。
根本原因不是 hidden 本身有问题，而是浏览器解析到该标签时先渲染，JS 执行后才应用隐藏逻辑（尤其 SSR + hydration 场景下）。
- 解决办法：CSS 兜底，加一条
[hidden] { display: none !important; }，确保样式层优先生效 - 如果元素本该“初始可见”，就别用
hidden，改用 class 控制，比如<div class="hidden"> + <code>.hidden { display: none; } - 若必须用
hidden且要过渡效果，注意它不能动画——得配合opacity或transform类手动控制，hidden只做最终开关
JS 动态显示 hidden 元素的正确姿势
不要用 setAttribute('hidden', '') 或 removeAttribute('hidden')，虽然能工作，但容易误操作、语义不清、且和初始状态判断不一致。
DOM 元素原生支持 hidden 属性作为布尔值读写，这才是推荐方式：
const el = document.getElementById('my-section');
el.hidden = true; // 隐藏，等价于添加 hidden 属性
el.hidden = false; // 显示，等价于完全移除 hidden 属性
console.log(el.hidden); // 返回 true/false，不是字符串
- 检查初始状态直接读
el.hidden，别用el.hasAttribute('hidden')——后者在服务端已带hidden的情况下，即使 JS 设了el.hidden = false，仍可能返回true - 设为
false后，若之前有内联style="display: none"，它不会自动清除，元素依然不可见——得手动清理：el.style.display = '' -
hidden对表单控件（<input>、<select></select>）有副作用：提交时彻底忽略，哪怕有name和value
hidden 和 display: none 到底该选哪个
选 hidden 当且仅当你要表达“这个内容当前逻辑上不该存在”；选 display: none 当你只是临时切换视觉状态，比如折叠面板、加载占位、动画入场。
它们看起来一样，但影响完全不同：
-
hidden是语义标记：屏幕阅读器跳过、表单不提交、无法获得焦点、不参与布局计算 -
display: none是样式声明：不影响语义，表单字段照常提交，辅助技术可能仍尝试解析（尤其旧工具） -
hidden不可过渡、不可动画；display也不能 transition，但你可以用opacity或max-height搭配它实现动效 - 权限控制场景下，两者都不可信——
hidden并不比display: none更安全，后端必须校验，前端只负责条件渲染
真正容易被忽略的是：hidden 一旦设上，后代元素全被连坐隐藏，包括伪元素 ::before / ::after；而 CSS 隐藏可以精细控制子元素。
