外部スタイル設定のためのpartとexportparts

Shadow DOM の厳格なスタイルカプセル化により、利用側はコンポーネント内部の個別要素を再スタイルできません。CSS 変数は全体的なプロパティには使えますが、たとえば内部の「close」ボタンに独自の border-radius を設定することはできません。これを解決するのが parts です。

シャドウ内部の要素に part="name" を付けます。すると利用側は ::part(name) 疑似要素を使って、その要素を対象にできます。my-dialog::part(close-button) { color: red; } のように記述します。名前を付けた要素がスタイル適用のフックになり、それ以外のシャドウ部分はカプセル化されたままになります。

名前をスペースで区切ると、1 つの要素を複数の part として公開できます。part="button primary" のように記述します。::part(button) は汎用的に対象にし、::part(primary) はプライマリースタイルの要素として対象にします。それぞれの名前は個別に照合されます。

::part で使用できる疑似クラスには、:hover、:focus、:disabled などの一部のものしかありません。子孫コンビネーターや、さらに詳しい構造的な選択は使用できません。::part(card) p は無効であり、子孫セレクターで part の内部に到達することはできません。

カスタム要素が自身のシャドウ内に別のカスタム要素を入れ子にしている場合、内側の要素の part は通常、外側のページには公開されません。入れ子にした要素に exportparts="close-button" を指定すると、その part を外側のホストへ転送できます。

exportparts="close-button: dismiss" と指定すると、内側の part が外側の要素では新しい名前でエクスポートされます。これにより、外側のコンポーネントは、どの内部要素を組み合わせているかに依存しない、整理された命名インターフェースを提供できます。

カスタムプロパティは値（色、間隔、フォント）を公開します。parts は要素を公開し、境界線、変形、アニメーションなど、CSS の全機能を利用できます。全体的なデザイントークンにはカスタムプロパティを、個別の要素レベルのカスタマイズには parts を使用してください。両方を同じコンポーネントで併用できます。

デザインシステムでは、最もカスタマイズされる要素（ボタン、ヘッダー、インジケーター）用に少数の parts を公開し、色、間隔、タイポグラフィ用には十分な数のカスタムプロパティを提供するのが一般的です。利用者は必要に応じて、値のレベルまたは要素のレベルでテーマを設定できます。

part 名はコンポーネントの公開 API の一部になるため、変更すると利用側の CSS が壊れます。「close-button」「header」「track」のように要素の位置ではなく役割を表す名前を選んでください。「first-button」のような位置に基づく名前を避けることで、実装が変化しても API の意味を保てます。

利用可能なすべての part（エクスポートされた part を含む）をコンポーネントの readme に一覧で記載してください。ドキュメントがないと、利用者は part を見つけるために DOM を調査する必要があり、たまたま見つけた実装に依存することになります。part の一覧は、フレームワークコンポーネントの props の一覧と同じように扱ってください。

::part と exportparts は、すべての最新ブラウザーで利用できます。古い Safari のバージョンでも、現在は ::part をサポートしています。自由に使用してください。非常に古いブラウザー（その多くはすでに使われていません）では、代替策として追加の CSS カスタムプロパティを使用してください。

exportparts 属性は何を行いますか。

part 属性は、::part(name) を介して個々のシャドウ要素を外部スタイルの対象として公開します。カプセル化を壊すことなく、CSS の機能を完全に利用できます。exportparts は、入れ子になったカスタム要素の part を外側のホストへ転送し、必要に応じて名前を変更します。parts と CSS カスタムプロパティを組み合わせて完全なテーマ設定用インターフェースを構築し、コンポーネント API の一部として part の一覧をドキュメント化してください。