el.hidden = true/false 是最语义正确且经浏览器优化的显隐控制方式，但其生效受 offsetparent、css 覆盖、display: contents、shadow dom 隔离四重约束；切换时须用属性赋值、同步清理 style.display、注意资源暂停与表单行为等副作用。
直接用 el.hidden = true 或 el.hidden = false 控制，是最简单、最语义正确、且浏览器原生优化的切换方式；别用 style.display 或 class 模拟，那会绕过 hidden 的语义保障和资源管理行为。
为什么 el.hidden = false 有时不显示
它不是“设了就一定可见”的视觉开关，而是受三重约束共同作用的结果：
-
el.offsetParent === null是判断是否真正隐藏的可靠依据；若不为null，说明元素仍在渲染流中，大概率被 CSS 覆盖了 - 检查是否有
[hidden] { display: block !important; }或内联style="display: block"—— 这类样式会直接覆盖 hidden 的默认行为 - 祖先节点是否用了
display: contents？这个值会让 hidden 完全失效，浏览器忽略其隐藏意图 - 是否在 closed-mode Shadow DOM 中？hidden 无法穿透 shadow boundary 生效
如何安全地用 JS 切换 hidden 状态
必须走 DOM 属性操作，而不是 class 或 style。浏览器对 hidden 属性变更做了专门优化，比反复 toggle class 更轻量：
- 设置隐藏：
el.hidden = true（自动添加hidden属性） - 取消隐藏：
el.hidden = false（自动移除属性），不要用removeAttribute('hidden')—— 语义不如赋值清晰 - 检测状态：统一用
el.hidden布尔值判断，别查el.hasAttribute('hidden')，因为el.hidden已封装了属性存在性与布尔逻辑 - 如果之前手动设过
el.style.display = 'none'，记得同步清理：el.style.removeProperty('display')
hidden 切换时必须同步处理的副作用
hidden 不只是“看不见”，它会中断内部资源生命周期 —— 这既是优势，也是陷阱：
-
<video hidden></video>会自动暂停，<iframe hidden></iframe>可能停止加载或卸载内容（取决于浏览器） - 隐藏后，
offsetHeight和getBoundingClientRect()返回全零值，不能用来做尺寸计算或动画起点 - 区块内若有第三方组件（如地图 SDK、图表库），它们通常不监听
hidden变化，可能导致初始化失败或白屏 - 表单字段仍参与提交和校验 —— 若需彻底退出，必须同步设
el.disabled = true或手动从FormData删除，同时更新el.required
最容易被忽略的是：hidden 的生效前提是两个视图必须是同级兄弟节点、初始共存于 DOM、且未被 CSS 或 Shadow DOM 隔离 —— 否则你写的 el.hidden = false 就只是在调用一个无效指令。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
