HTML标准中inert与hidden="until-found"属性的交互行为解析

背景介绍

在HTML标准中，inert属性和hidden="until-found"属性都是用于控制元素可见性和交互性的重要特性。inert属性可以使元素及其子元素变得"惰性"，即不可交互且对辅助技术不可见；而hidden="until-found"则允许元素保持隐藏状态，直到被页面搜索功能找到时自动显示。

问题发现

开发者在使用这两个属性组合时发现了一个有趣的现象：在Chrome 123及更早版本中，可以同时设置元素为inert和hidden="until-found"，然后通过beforematch事件监听器来取消inert状态并显示元素。这种组合在构建可折叠面板(accordion)时特别有用，因为关闭的面板需要保持惰性，同时仍允许用户通过页面搜索找到其中的内容。

然而，从Chrome 124开始，这种行为发生了变化，不再支持这种组合使用方式。这引发了对标准预期行为的讨论。

标准规范分析

根据HTML标准，inert属性明确规定：

1. 用户代理应忽略惰性子树中的节点，不将其包含在页面查找(find-in-page)功能中
2. 惰性元素不应获得焦点
3. 惰性元素应从辅助技术(如屏幕阅读器)中隐藏

而hidden="until-found"属性的设计目的是：

1. 保持元素隐藏状态
2. 当页面搜索找到匹配内容时自动显示
3. 触发beforematch事件

浏览器实现差异

各主流浏览器对此的实现存在差异：

1. Chrome 102-123版本：支持这种组合使用方式
2. Chrome 124+版本：不再支持在惰性元素中进行页面查找
3. Firefox 112-123版本：曾支持此功能，后与Chrome同步修改
4. Safari：目前仍支持在惰性元素中进行页面查找

技术实现建议

对于需要实现可折叠面板的场景，开发者应考虑以下最佳实践：

1. 优先使用hidden="until-found"而非inert属性，因为前者已经提供了必要的可访问性控制
2. 如果需要动画效果，可以使用CSS的@starting-style规则而非依赖inert
3. 避免同时使用inert和hidden属性，除非有明确的特殊需求

结论

经过分析可以确认，Chrome 124及后续版本的修改是符合HTML标准规范的。inert属性本就应阻止页面查找功能在其子树中执行，之前能够工作的行为实际上是浏览器未完全遵循规范的临时状态。开发者应当调整实现方式，遵循标准推荐的做法来构建可访问的交互组件。

这一案例也提醒我们，在组合使用新兴HTML特性时，需要深入理解每个属性的设计意图和规范定义，以避免依赖可能变更的实现细节。