`hidden="until-found"`をReactでも使いたい！

2025年07月19日 -

#React
#Web標準

HTMLのグローバル属性hiddenはuntil-foundを指定することで、その中のコンテンツが見つかるまでの間だけ非表示にできます。

すべての HTML要素は hidden コンテンツ属性設定を持ってもよい。hidden 属性は、次のキーワードと状態を持つ列挙属性である：

キーワード

状態

概要

hidden

非表示

レンダリングされない。

（空文字列）

非表示

レンダリングされない。

until-found

Hidden Until Found

レンダリングされないが、ページ内検索およびフラグメントナビゲーションで内部のコンテンツにアクセスできる。

キーワード	状態	概要
`hidden`	非表示	レンダリングされない。
（空文字列）	非表示	レンダリングされない。
`until-found`	Hidden Until Found	レンダリングされないが、ページ内検索およびフラグメントナビゲーションで内部のコンテンツにアクセスできる。

引用：HTML Standard 日本語訳 https://momdo.github.io/html/interaction.html#the-hidden-attribute

Safari以外の主要ブラウザでは利用可能な仕様^[1]ですが、まだReact@19現在ではサポートが追いついておらず型エラーが発生し、Reactでは値のない論理属性として扱われてしまいます。

jsx

<div hidden="until-found" />

暫定的にhooksで解決する

use-hidden-until-found.ts

import { useEffect } from 'react';

export const useHiddenUntilFound = () => {
  useEffect(() => {
    document.querySelectorAll('[data-hidden-until-found]').forEach((node) => {
      node.setAttribute('hidden', 'until-found');
      node.removeAttribute('data-hidden-until-found');
    });
  }, []);

  return {
    'data-hidden-until-found': '',
    hidden: true,
  };
};

refで解決する方法が思い浮かびますが、Reactがサポートした時にあちこち直さないといけなくなるのも大変です。

そこでhookを作って対応して、必要無くなったら一括置換で削除することにします。

jsx

import { useHiddenUntilFound } from '@/hooks/use-hidden-until-found';

export const Component = () => {
  const untilFound = useHiddenUntilFound();
  return <div {...untilFound}>見つかるまで隠されているコンテンツ</div>;
};

本件についての議論はGitHub上にIssueやPull Requestが立っています^[2]^[3]が、Safariがサポートするまでは進まなさそうです。

until-foundは、ユーザー体験とアクセシビリティの両面で優れた特性を持つ属性です。ReactやSafariでも正式にサポートされることで、より自然に活用できる日が来ることを期待しています。

`hidden="until-found"`をReactでも使いたい！

暫定的にhooksで解決する

脚注

† YOUR COOKIE PREFERENCES †