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

Published on December 22, 2024

Customizable Select Elementのまとめ

Table of Contents

はじめに
Customizable Select Elementまとめ
やり残したこと
Epilogue: Customizable Select Element
- Appendix

はじめに

今回は、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()の制限については、現在も議論中。