Interest Invokersとcommand属性

Open UIグループは、クリックでアクションを実行するcommandと、ホバーやフォーカスで「関心」を示すinteresttargetという、2つの新しいHTML属性を標準化しています。後者はツールチップやプレビューの基盤となるものです。どちらも、これまでJavaScriptが必要だった動作を宣言的に記述できるようHTMLを拡張します。

command="show-modal"とcommandfor="dialog-id"を指定したボタンを使うと、JSなしでダイアログを表示できます。これは、手動でdialog.showModal()を呼び出す実装に置き換わるものです。その他のコマンドには、command="close"やcommand="toggle-popover"、command="show-popover"があります。

初期のコマンド群は、一般的なUIパターンを対象としています。ダイアログ（組み込みの<dialog>）の表示・非表示、ポップオーバー（Popover API）の切り替えなどです。今後、種類が増える可能性があります。カスタム要素は、oncommandイベントハンドラーを使って、受け付けるコマンドを宣言できます。

組み込みコマンドに加えて、仕様では「--」で始まるカスタムコマンド文字列も使用できます。対象要素はcommandイベントを受け取り、JSで処理できます。例：el.addEventListener("command", (e) => { if (e.command === "--save") save(); })。

interesttarget属性は、要素の「関心」の対象を指定します。対象は通常、ホバーまたはフォーカスで表示されるツールチップです。ブラウザーが、タイミング（300ミリ秒のホバー意図判定の遅延）、位置（アンカーポジショニングを使用）、閉じる処理を自動的に管理します。

hintポップオーバーモードは、関心を示したときに表示されるツールチップ風のポップオーバー向けに設計されています。モーダルではないためフォーカスを奪わず、関心がなくなると閉じます。interesttarget + popover="hint"を組み合わせることで、2つのHTML属性だけでネイティブのツールチップを実現できます。

ネイティブダイアログはフォーカスの閉じ込めを処理し、ネイティブポップオーバーは重なり順を処理し、ネイティブのinterest invokerはホバー意図の判定タイミングを処理して、スクリーンリーダーに要素間の関係を伝えます。カスタムJS実装をこれらの宣言的な基本機能に置き換えることで、アクセシビリティの品質を安定して向上させられます。

これらの機能は現在も標準化が進められています。正確な属性名やコマンドの種類は変更される可能性があります。ブラウザーへの実装は、まずChromiumから始まっています。本番環境での使用は、命名が安定し、少なくとも2つのブラウザーで提供されるまで待つことをおすすめします。おそらく今後1～2年以内になるでしょう。

これらの機能は、ダイアログ管理、ポップオーバーの起動、ツールチップの動作など、何百万回も書き直されてきたJavaScriptをそれぞれ置き換えます。こうしたパターンをHTMLに移すことで、ページの容量を減らし、一貫性を高め、ブラウザーによる最適化も可能になります。

Open UIコミュニティグループ（open-ui.org）は、この取り組みの多くを推進しています。新しいHTML要素や属性を提案・試作し、標準化のプロセスを進めています。最新の提案については、ブログを確認してください。

command、interesttarget、popover、dialog、アンカーポジショニング、ビュートランジション、カスタマイズ可能なselectは、コンポーネントライブラリのパターンをプラットフォームに取り込む、1つの一貫した取り組みの一部です。それぞれは小さな機能ですが、合わせると、ここ数年で最大規模となるHTMLのUI語彙の拡張を意味します。

提案の進展（open-ui.org）を追い、フラグを有効にしたChromiumで試し、機能が安定したら採用できるよう計画してください。既存のコードベースも確認しましょう。ダイアログ、ポップオーバー、ツールチップの処理にどれだけのJSを使っているかを数えてください。そのコードは、今後数回のリリースで置き換えられる対象です。

開発中の2つの機能により、HTMLの宣言的なUI語彙が拡張されます。command + commandforはクリックで実行するアクション（モーダルの表示、ポップオーバーの切り替え）に、interesttarget + popover="hint"はホバーやフォーカスで表示するツールチップに使用します。どちらも一般的なJavaScriptパターンをHTML属性に置き換え、アクセシビリティを向上させながらバンドルサイズを削減します。まだ進化の途中にあるため、Open UIで安定化の進展を追い、ブラウザー対応に合わせて提供してください。