Hidden until found

Recently while reading through the rendering section section of the HTML spec, I came across the hidden=“until-found” attribute. Being that it’s the first time I have ever seen this, I did a search and found [a page on the chrome developers website that explains it]((https://developer.chrome.com/articles/hidden-until-found)

This attribute will allow for hidden text to be searchable from the browser’s in page search. It also allows Google to index and link to the hidden content. However, there are a few things you need to know first.

1. Browser support at this time is chrome version 102+
2. There is an onbeforematch event which can be hooked into.
   • The event must be on the parent or previous ancestor of the matched content that is being searched.
3. Shouldn’t rely on the in page search to make the content visible. The hidden content should be revealable due to browser support and also for consistent UX.
4. Treats the hidden content as content-visibility: hidden;
5. getBoundingClientRect will report that the element has space and position
6. Child nodes won’t be rendered
7. Border and explicit size will still effect the rendering. This means that if the element with the attribute has padding, margin or borders it will render the element with it but not show the child nodes.
   • It’s best to add to child nodes

It is possible to feature detect hidden="until-found" by checking for the onbeforematch event on the body.

if (!("onbeforematch" in document.body)) {
	//... do stuff ... 
}

Here’s an example I made in CodePen that is heavily influenced by the chrome dev blog’s example. Search for bork.

See the Pen hidden until found by James (@jamcgrath) on CodePen.