hidden="until-found"
Text the find bar can still reach
Press CtrlF and search for q-u-i-n-c-e, spelled without the dashes.
Quince. The browser opened this panel itself, scrolled it into view and fired beforematch on the way.
CaveatThe reveal comes from the user agent rule content-visibility: hidden, so any author rule that hides the element properly, display: none most of all, takes the text back out of the find bar's reach. It also answers only to find-in-page and to a scroll-to-text link, never to scrollIntoView(), so script still has to remove the attribute itself.
FallbackA browser that does not know the value reads the attribute as the plain boolean hidden, so the panel stays shut and find-in-page never sees inside it. Nothing leaks and nothing breaks, you simply lose the reveal, which is why this belongs on secondary detail rather than on anything a reader has to find.
<div hidden="until-found">
Findable, and still collapsed.
</div>
/* do not undo the UA rule that makes it work */
.panel { content-visibility: hidden; }Published
Questions
What does hidden="until-found" do?
It keeps a block collapsed but leaves its text reachable by the browser's find bar and by a scroll-to-text link. When a match lands inside, the browser fires beforematch, removes the hidden attribute itself and scrolls the block into view.
Why is my hidden until-found content not revealing?
Usually because a stylesheet hides it a second time. The value works through the user agent rule content-visibility: hidden, and an author display: none on the same element takes the text out of the find bar's reach entirely. It also ignores scrollIntoView(), which is not a find.
What is the beforematch event for?
It fires on the element just before the browser reveals it, which is the moment to do whatever the markup cannot, such as marking an accordion header as expanded or loading the image inside. It is cancelable in name only, so treat it as a notification rather than a gate.