OpenUIがWebコンポーネントをどのように形作っているか
カスタムドロップダウン、ツールチップ、ポップオーバーをゼロから構築したことがあるなら、そのコストをご存知でしょう。数十行のJavaScript、手動でのARIA属性の設定、キーボードナビゲーションのロジック、そしてブラウザ間の不整合への対応。OpenUIは、このような作業をプラットフォームレベルで排除することを目指しています。
OpenUIは、コンポーネントライブラリやフレームワークではなく、W3Cコミュニティグループです。その目標は、Web上の一般的なUIパターンを特定し、既存のデザインシステムがどのように実装しているかを研究し、ブラウザベンダーと直接協力して相互運用可能でアクセシブルなソリューションをネイティブに標準化することです。
重要なポイント
- OpenUIは、一般的なUIパターンをブラウザネイティブ機能として標準化するW3Cコミュニティグループであり、カスタムJavaScript実装の必要性を削減します。
- Popover API、Invoker Commands API、カスタマイズ可能な
<select>要素は、OpenUIの活動の直接的な成果として、すでにブラウザで提供されています。 - Interest Invokers、Focusgroup、comboboxの改善などの提案は、プラットフォームが次に向かう方向を示しています。
- サードパーティのコンポーネントに手を伸ばす前に、ブラウザが現在ネイティブで処理できることを確認してください。そのリストは毎年増えています。
OpenUI Web標準が実際に行うこと
核心となる前提はシンプルです。すべてのチームが同じセレクトメニュー、ポップオーバー、コンボボックスをカスタムJavaScriptで再構築しているなら、プラットフォームレベルで何かが間違っています。OpenUIはこれらのパターンを文書化し、仕様を提案し、開発者が同じ車輪を再発明するのをやめられるよう、ブラウザネイティブの実装を推進しています。
このグループは、HTMLに完全に欠けているか、スタイルや拡張が困難な形でしか存在しないコントロールに焦点を当てています。<select>、ポップオーバー、メニュー、コンボボックス、ツールチップなどです。
すでに提供されている実用的な機能
Web UI向けのPopover API
Popover APIは、OpenUIの影響による最も直接的な成果の一つです。開発者にネイティブのpopover属性を提供し、表示/非表示の動作、トップレイヤーレンダリング、ライトディスミスを標準で処理します。基本的な機能にJavaScriptは不要です。
<button popovertarget="menu">Open Menu</button>
<div id="menu" popover>Menu content here</div>これにより、以前はカスタムのフォーカストラップ、z-indexのスタッキング、外側クリック検出が必要だったパターンが置き換えられます。
宣言的UI制御のためのInvoker Commands API
Invoker Commands APIはこれをさらに拡張し、最近主要ブラウザ全体でベースラインサポートに達しました。commandとcommandfor属性を使用することで、ボタンはターゲット要素に対してアクションを宣言的にトリガーできます。ポップオーバーの切り替え、ダイアログの開閉、メディアの再生など、イベントリスナーなしで実行できます。
<button commandfor="my-dialog" command="show-modal">Open Dialog</button>
<dialog id="my-dialog">Dialog content</dialog>これにより、UI制御ロジックがJavaScriptからHTMLへ移行し、インタラクションの可読性、保守性が向上し、デフォルトでアクセシブルに保たれます。
Discover how at OpenReplay.com.
カスタマイズ可能なSelect要素のCSS
<select>要素は、スタイリングが非常に困難なことで知られています。OpenUIのカスタマイズ可能なselect要素に関する取り組みは、これを変えつつあります。appearance: base-selectにより、ブラウザはselect要素の内部構造をCSSターゲティング用に公開します。::picker(select)疑似要素を使用すると、ドロップダウンコンテナを直接スタイリングできます。
select {
appearance: base-select;
}
select::picker(select) {
border: 1px solid #ccc;
border-radius: 8px;
padding: 4px;
}この機能はまだ実験的であり、現在はプログレッシブエンハンスメントとして使用するのが最適ですが、重要な変化を表しています。カスタムコンポーネントやJavaScriptラッパーなしでスタイル付きセレクトを実現できます。
まだ進行中のもの
OpenUIが探求しているすべてが提供されているわけではありません。いくつかの提案はアクティブですが、まだ標準化されていません。
- Interest Invokers — JavaScriptなしでホバーやフォーカスでポップオーバーをトリガー
- Focusgroup — 要素グループ全体での宣言的キーボードナビゲーション、手動の
tabindexローミングロジックを置き換え - Comboboxの改善 — 一般的な
<input>+ カスタムリストボックスの組み合わせを置き換えるネイティブでスタイル可能なコンボボックスパターン
これらは追跡する価値があります。現在のブラウザサポートが限定的であっても、プラットフォームが向かう方向を示しています。
まとめ
OpenUI Web標準は、カスタムコンポーネントやJavaScript重視の実装が必要なケースを着実に減らしています。Popover API、Invoker Commands API、カスタマイズ可能なselect要素のCSSはすでに使用可能です。まだ進行中の提案であるInterest Invokers、Focusgroup、comboboxは、その方向性を示しています。
サードパーティのコンポーネントに手を伸ばしたり、カスタムインタラクションロジックを書いたりする前に、プラットフォームが現在ネイティブで処理できることを確認してください。OpenUIは毎年そのリストを長くしています。
よくある質問
はい。Popover APIは、Chrome、Edge、Safari、Firefoxを含むすべての主要ブラウザでサポートされています。表示/非表示の動作、トップレイヤーレンダリング、ライトディスミスをネイティブで処理します。サポートがない古いブラウザの場合は、ポリフィルまたは簡単なJavaScriptフォールバックを使用できますが、ベースラインカバレッジはほとんどの本番ユースケースに十分な広さです。
Popover APIは特にポップオーバーの表示/非表示動作を処理します。Invoker Commands APIはより汎用的です。commandとcommandfor属性を使用して、ボタンが任意のターゲット要素に対してアクションを宣言的にトリガーできるようにします。これには、ダイアログの開閉、ポップオーバーの切り替え、メディア再生の制御が含まれ、すべてJavaScriptイベントリスナーを書くことなく実行できます。
完全にはまだです。appearance base-select値とpicker疑似要素は現在Chromiumベースのブラウザで実装されており、他のエンジンはまだ実験中または議論中です。SafariとFirefoxのサポートはまだ進行中です。今日、select要素のクロスブラウザで一貫したスタイリングが必要な場合は、プログレッシブエンハンスメントアプローチが最適です。サポートされている場所ではbase-selectを使用し、それ以外ではデフォルトのスタイリングにフォールバックします。
完全にではありませんが、ギャップは狭まっています。OpenUIは、すべてのライブラリが再構築するポップオーバー、セレクト、ダイアログなどの最も一般的なパターンをターゲットにしています。ブラウザネイティブサポートが拡大するにつれて、サードパーティの抽象化が必要なケースは縮小します。複雑で高度にカスタマイズされたコンポーネントの場合、ライブラリは依然として価値を提供しますが、ベースラインは上昇し続けています。
Gain control over your UX
See how users are using your site as if you were sitting next to them, learn and iterate faster with OpenReplay. — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.
