hidden属性需手动添加css兜底规则[hidden] { display: none !important; }，否则因浏览器支持不一致易闪现；js操作应直接读写el.hidden布尔值，禁用setattribute；hidden与type="hidden"语义不同，不可混用。
hidden属性写了却没隐藏？先查CSS兜底规则
加了hidden元素还显示，90%是因为缺这条CSS：[hidden] { display: none !important; }。浏览器原生对hidden的默认样式支持不一致，尤其在SSR直出、CSS未加载完或被框架重置时，会闪现内容（FOVC）。必须手动补上兜底规则，且要带!important——否则像div { display: block !important; }这类全局样式会直接覆盖它。
- 把它放在
@layer base末尾，或基础样式表最底部 - 别依赖浏览器默认行为，现代项目也得加
- 如果用了Tailwind或Bootstrap，检查是否禁用了
[hidden]选择器
JS操作hidden别用setAttribute，直接读写el.hidden
el.hidden = true和el.hidden = false是唯一推荐方式。前者自动添加hidden属性，后者彻底移除它；而el.setAttribute('hidden', 'false')这种写法只会让元素更顽固地隐藏——因为只要属性存在，就生效，值是什么浏览器根本不看。
- 判断状态直接用
if (el.hidden)，别用el.hasAttribute('hidden')，SSR场景下它不可靠 - 如果之前用
el.style.display = 'none'隐藏过，设el.hidden = false前得先清内联样式：el.style.display = '' -
el.hidden是布尔值，不是字符串，写el.hidden = 'true'等于没写
hidden和type="hidden"完全不是一回事
hidden属性作用于任意HTML元素，表示“当前逻辑上不该存在”，整个元素退出渲染树、可访问性树、表单序列化；而type="hidden"只用于<input>，语义是“这个字段要提交但不显示”。混用会导致表单数据丢失或无障碍失效。
-
<input name="token" value="abc" hidden>→ 该字段在FormData里彻底消失 -
<input type="hidden" name="token" value="abc">→ 提交时必带，且屏幕阅读器不会读它（因type语义明确） - 想隐藏整块表单区域（比如某个
<fieldset></fieldset>），用hidden；只想藏一个字段值，用type="hidden"
需要过渡动画？hidden不能动，只能当最终开关
hidden没有过渡能力，transition: display无效，@keyframes也控制不了它。它只有开/关两种原子状态，一设就消失，一删就出现。真要动画，得组合使用：先用opacity或max-height做渐变，等动画结束再用el.hidden = true收尾。
- 折叠面板别直接
el.hidden = true，应先加opacity: 0+transition，动画完成后再设hidden - 键盘焦点和屏幕阅读器感知的内容（如展开前摘要），不能用
hidden，该用aria-hidden="true"配合visibility: hidden - IE9及更早不支持
hidden，但现代项目基本不用管；若必须兼容，服务端判断UA后直接不输出DOM更稳妥
hidden声明的是“内容当前不相关”，不是“我暂时不想让你看见”。一旦你开始想“等会儿还要show出来”，它大概率就不是最佳选择。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
