hidden 属性に until-found を指定

<div>foo</div>
<div hidden="until-found">bar</div>
<div>baz</div>

bar は表示されないけど Ctrl-F で bar を検索すると見つかり表示されるようになる
hidden="until-found" があるとスタイルに

content-visibility: hidden;

が設定されて非表示になってる
検索で見つかると 要素から属性が消えるのでスタイルも消えて表示される

display: none ではないので 非表示の挙動が少し違う
flex/grid の子要素だと要素があるように扱われる
中のサイズは計算されないけど その要素自身のスタイルの width/height は反映される
margin/padding も反映されて余白ができる

これを避けるために別のスタイルで display: none をつけると完全にないものとして扱われるので 検索対象からも外れてみつからなくなる
これまでの hidden 属性で 属性だけつけてもクラスのスタイルが優先されて表示されることがあるので

[hidden] {
	display: none !important;
}

をつけて回避することがあったけど これをやると until-found が無意味になってしまう

非表示時のサイズを指定したい場合は contain-intrinsic-size を使える

div {
	contain-intrinsic-size: 100px 50px;
}

表示されたら hidden 属性が消えるので

[hidden="until-found"] {
	width: 100px;
	height: 50px;
}

でも良い