🎄Open UI Advent Calendar: Day 22 / Customizable Select Element Ep.20

2024-12-22

はじめに

🎄 この記事はOpen UI Advent Calendarの22日目の記事です。

今回は、20日をかけて連載してきた、Customizable Select Elementについてまとめる、シリーズの最終エントリです。

Customizable Select Elementまとめ

Ep.1からEp.19にかけて、Customizable Select Elementの提案に関連する仕様の変遷を追ってきました。

Ep.1:
- Prologue: Customizable Select Element。HTML Form Controlの歴史から、Form ControlのスタイルはCSSから制御することができず、ブラウザやOSに依存していたことを振り返る。
Ep.2:
- ブラウザ戦争の激化と、OSに依存したコントロールの問題の顕在化。打開する動きとして、WaSPによるWeb標準の台頭への動き、モダンブラウザの登場、より柔軟なスタイリングを可能にするCSS3の登場へ。
Ep.3:
- Web標準化の動きが進んでもなお、CustomizableでないForm Controlの紹介。Customizable Select Element提案の契機となるサーベイ結果。
Ep.4:
- GregやMasonによる一連の調査を踏まえ、DomenicがOpen UIでCSEの初期提案を行う。
Ep.5:
- Open UIでCSEのResearchが行われる。同時期にMSで<selectmenu>Explainerの作成。Explainerに基づいて、<selectmenu>がIntent to Prototypeに。
Ep.6:
- <selectmenu>が<selectlist>にリネーム。既存のUIパターンとの混乱を避けるため。
Ep.7:
- <selectlist>が<select>にリネーム。<selectlist>/<listbox>は<select>/<datalist>の組み合わせでも実現可能＆Progressive Enhancementの観点を考慮したため。
Ep.8:
- 現状のCSEデフォルトスタイルの紹介。ここから、appearance: base-select;の見た目はどう決まったのかを探る。Ep.8では、選択された<option>のデフォルトチェックマークのスタイルの決定背景について。
Ep.9:
- ::picker-iconのデフォルトスタイルの決定背景について。
Ep.10:
- ::picker(select)のデフォルトスタイル。特に、デフォルトColorから探るsystem-color/ color-scheme/ prefers-color-schemeの関係。
Ep.11:
- <selectedcontent>提案のきっかけとなったIssueの紹介。選択された<option>のvalueとスタイルを反映する初期の仕組みとして、part属性とslot属性。
Ep.12:
- part属性をCSEのUA実装で使用することの問題。part属性をbehavior属性にリネーム。Gregが、<option>のvalueのみならず、<option>の内部コンテンツ自体を<selectedcontent>に反映する仕様を示唆する。
Ep.13:
- <option>の内部コンテンツ自体を<selectedcontent>に反映する方法の検討。innerHTMLを使用して内部コンテンツを反映する方法は見送り。slot属性とbehavior属性を用いた、valueとスタイルの反映のみ可能なまま。
Ep.14:
- slot属性とbehavior属性使用への疑念。WHATWGのDomenicと、Open UI側の間で議論が白熱する。結果として、「選択された<option>を<button>にスロットしてカスタマイズできるようにする」唯一の手段であった、slot属性とbehavior属性が使用廃止へ。
Ep.15:
- slot属性とbehavior属性が使用廃止を受けて、新しいCSE Anatomyが考案される。選択された<option>の子Nodeを、cloneNode()で、<selectedoption>のLight DOMにクローンする手法が提案される。これは、HTML史上初となる、UAからLight DOMへ変更を加える実装の契機となるもの。
Ep.16:
- Light DOMへのクローン追加実装か、はたまたShadow DOMにするのか。WHATWGのみならず、CSSWGと合意形成がなされ、Light DOMへのクローン追加実装で確定。加えて、<selectedcontent>の実装に関する議論の現状、特に「クローンタイミング」に関する懸念を深掘る。
Ep.17:
- 「同期タイミング」「マイクロタスクタイミング」「CEReactionタイミング」、３つの異なるクローンタイミングのうち、どれを採用するのか問題。この時点では、パフォーマンスの面で優れた「マイクロタスクタイミング」が有力に。
Ep.18:
- 「CEReactionタイミング」でのクローンが検討されるも、WHATNOTでの議論の結果、「同期タイミング」でクローンを作成する方針に切り替わる。加えて、<option>内がリッチコンテンツの場合における、cloneNode()の制限を紹介。
Ep.19:
- そもそも「Node変更検知のタイミング」をUA側でコントロールする必要があるのか？という、Jakeの問題提起に基づき、デフォルトでは変更検知でのクローンはせず、更新をトリガーする方法を別で提供する方法が採用される。cloneNode()の制限については、現在も議論中。