先记住这个答案
hidden 表明内容当前不应展示，浏览器通常通过用户代理样式隐藏它；但作者的 display 规则可能覆盖这一默认样式。遇到元素带 hidden 却仍可见，应查实际级联，而不是以为属性失效。hidden="until-found" 另有被页面查找或片段定位揭示的行为，不能和普通隐藏状态混用。
- 普通
hidden通常不呈现 - 作者
display可能覆盖它 until-found可被查找揭示- 隐藏不等于权限控制
被组件样式重新显示的面板
一个折叠面板未展开时带着 hidden，但全局组件样式 .panel { display: flex } 把它又显示出来。修复时可以让组件样式尊重隐藏状态，例如写 [hidden]:not([hidden="until-found"]) { display: none !important; }，或者避免通用选择器覆盖隐藏状态。若想让浏览器“查找页面”能找到并展开内容，则要单独考虑 until-found，不能一概强制 display: none。
<section class="panel" hidden>未展开的内容</section>
<style>
.panel { display: flex; } /* 可能覆盖浏览器的隐藏样式 */
[hidden]:not([hidden="until-found"]) { display: none !important; }
/* 普通 hidden 保持不显示 */
</style>浏览器为普通 [hidden] 提供隐藏渲染规则，但它位于用户代理样式来源，作者样式按级联可以覆盖。
示例用 [hidden]:not([hidden="until-found"])，刻意排除可由查找揭示的状态；如果粗暴地写 [hidden] { display: none !important; }，后者也可能永远无法正常展示。普通隐藏面板的显示条件可以由组件状态控制，但不要同时靠属性和一堆相反的 CSS 类拉扯。状态切换时检查元素是否真的从交互路径移除，尤其是关闭弹层后 Tab 会到哪里。
作者 CSS 可覆盖普通隐藏样式
hidden="until-found" 通常采用跳过内容呈现的机制，而非普通 display: none；浏览器的页面查找或锚点导航能把它揭示出来。若你把所有 [hidden] 都强制设 display: none，会破坏这种揭示能力。还应记得，隐藏内容不等于敏感数据访问控制，数据仍可能在 HTML 中。
在组件里常见的坑是同时写了 hidden 和 .panel { display: flex; }。后者作为作者样式，可能胜过浏览器默认的隐藏规则，于是状态标记和实际画面矛盾。调试时看计算后的 display，并给 [hidden] 明确的样式或只在显示时移除属性。切换状态也要检查焦点：隐藏前若焦点还在面板内，应转移到可见的触发按钮。
容易答错的地方
- 以为
hidden不可能被 CSS 覆盖 - 作者样式可能在级联中覆盖用户代理的显示规则，应检查计算后的
display。 - 把
until-found当成普通隐藏 - 它允许查找和片段导航揭示，不能统一按
display: none处理。
面试官还会怎么问？
hidden 可以代替权限控制吗？
不可以。隐藏的内容仍在文档中，敏感数据应在服务端按权限决定是否返回。
为什么 .panel { display: flex } 会赢？
它来自作者样式层级，可覆盖浏览器默认的隐藏显示规则。
何时用 hidden="until-found"？
折叠的长文档内容仍希望可被页面查找和锚点定位时可以考虑。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。