hidden 是显式布尔属性，浏览器强制不绘制、不布局、不语音朗读，且忽略子元素焦点与可访问性暴露；其生效需直接出现在标签中，但可能因 !important css、js 移除、shadow dom 隔离等“看似失效”。
hidden 属性确实能阻止元素渲染，但它不是“隐式声明”——它是显式的布尔属性，浏览器按规范强制不绘制、不布局、不语音朗读，且会忽略其子元素的焦点和可访问性暴露。
hidden 属性的生效条件与常见失效场景
只有当 hidden 出现在元素标签中（无论值是否为空或 hidden="true"），浏览器才识别它。但以下情况会让它“看似失效”：
- CSS 中写了
display: block !important或visibility: visible !important——hidden的样式重置会被!important覆盖 - JavaScript 动态移除了
hidden属性，但开发者误以为 DOM 更新延迟导致“没生效” - 元素是自定义组件（如 Web Component）且 shadow DOM 内部未继承或响应
hidden，此时宿主元素上的hidden不影响内部渲染
hidden 与 display: none 的关键区别
二者都让元素不可见，但语义和行为不同：
-
hidden是 HTML5 语义属性，触发浏览器原生行为：跳过可访问性树、禁用焦点、不参与 tab 键导航；display: none纯属 CSS 布局控制，无障碍技术可能仍暴露内容（取决于实现） -
hidden无法被 CSS:not([hidden])之外的选择器直接否定；而display: none无法用属性选择器捕获 - 动画/过渡对
hidden无效（它不触发重绘周期），想做淡出需先移除hidden，再加 class 触发opacity过渡
在 JavaScript 中安全操作 hidden 属性
不要用 element.style.display = 'none' 替代，也不要用 setAttribute('hidden', 'true') 写字符串值——标准做法是：
// 正确：添加/移除属性本身
element.hidden = true; // 自动添加 hidden 属性
element.hidden = false; // 自动移除 hidden 属性
// 错误：手动设字符串值（虽能生效，但冗余且易错）
element.setAttribute('hidden', 'true'); // 不推荐
element.removeAttribute('hidden'); // 可以，但不如 .hidden = false 直观
element.hidden 是可读写的 DOM 属性，底层同步映射到 presence/absence of the attribute，语义清晰、兼容性好（IE11+、所有现代浏览器）。
真正容易被忽略的是：如果元素已通过 CSS 设置了 display: contents 或 position: absolute 并脱离文档流，hidden 依然会生效——它不依赖布局上下文，而是由 HTML 渲染引擎在解析阶段就决定跳过该节点的整个渲染管线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
