收合內容部分 (有時稱為「摺疊」) 是常見的 UI 模式。不過，如果內容隱藏在摺疊區域中，就無法透過「在頁面中尋找」搜尋功能進行搜尋。此外，您也無法連結至收合區域內的文字片段。
hidden=until-found HTML 屬性和 beforematch 事件可以解決這些問題。只要在隱藏內容的容器中加入 hidden=until-found，瀏覽器就能在該隱藏區域中搜尋文字，並在找到相符項目時顯示該區段。
這些功能可在 Chrome 102 以上版本使用，讓我們一起來瞭解這些功能的運作方式。
使用方式
如果網站已有可折疊的部分，而您想讓這些部分可供搜尋，請將隱藏該部分的樣式替換為 hidden=until-found 屬性。如果您的網頁還有其他狀態需要與顯示/隱藏區段的狀態保持同步，請新增 beforematch 事件事件監聽器，在瀏覽器顯示該元素之前，在 hidden=until-found 元素上觸發事件。
注意事項
為提供一致的使用者體驗，hidden=until-found 內容應可在未使用頁面內搜尋功能的情況下顯示。並非所有使用者都會使用「在頁面中尋找」功能，且不支援 hidden=until-found 的瀏覽器會提供隱藏內容的原始體驗，而不會透過「在頁面中尋找」功能揭露內容。
如果您想確保隱藏內容可在不支援 hidden=until-found 的瀏覽器中搜尋，可以隨時在這些瀏覽器中展開隱藏內容。您可檢查是否存在 beforematch 事件處理常式，藉此執行功能偵測：
if (!(‘onbeforematch' in document.body)) {
// expand all hidden content
}
hidden=until-found 會套用 content-visibility:hidden CSS 屬性，而非一般隱藏屬性套用的 display:none 屬性。如要在關閉狀態下搜尋特定內容，則必須使用這份文件，但同時具有以下副作用：
- 部分版面配置 API (例如
getBoundingClientRect) 會回報hidden=until-found元素內隱藏的內容會佔用空間，並在頁面中佔有位置。 hidden=until-found元素的子節點不會算繪，但hidden=until-found元素本身仍會顯示方塊。也就是說，邊框和明確大小等 CSS 屬性仍會影響算繪作業。
以下範例會在套用 hidden=until-found 的元素中加入邊距、邊框和邊框間距。在隱藏內容顯示的位置，會出現一個灰色邊框的方塊，當隱藏內容顯示時，這個方塊會填入隱藏內容。這是隱藏元素的方塊。
如要避免這個問題，請在含有 hidden=until-found 的容器內，為巢狀元素加上框線。