可搜索的折叠内容

hidden="until-found" HTML 属性使得折叠内容可以通过浏览器的页面查找功能 (Cmd+F / Ctrl+F) 进行搜索。当用户搜索隐藏在折叠部分中的文本时，浏览器会自动显示该部分并滚动到匹配项。

重要性

传统的折叠部分使用 display: none 或 hidden 会阻止浏览器搜索找到内容。用户必须手动展开每个部分才能找到他们想要的内容——这是一种令人沮丧的体验，违背了页面查找的目的。

使用 hidden="until-found"，内容在视觉上保持隐藏但可搜索。浏览器检测到匹配项，展开该部分并突出显示结果——正如用户所期望的那样。

工作原理

将标准隐藏方法替换为折叠内容上的 hidden="until-found" 属性：

<details>
  <summary>部分标题</summary>
  <div hidden="until-found">
    可以通过 Cmd+F 找到的内容
  </div>
</details>

当浏览器在隐藏元素中找到匹配项时，它会：

1. 移除 hidden 属性
2. 触发 beforematch 事件（对动画或状态更新很有用）
3. 将匹配项滚动到视图中
4. 突出显示匹配的文本

这创造了一个无缝的体验，使得页面查找“正常工作”，无论 UI 状态如何。

浏览器支持

hidden="until-found" 属性在基于 Chromium 的浏览器（Chrome、Edge、Arc）中从版本 102 开始支持。在不支持的浏览器中，它会优雅降级——内容保持隐藏，但无法通过页面查找进行搜索。