::part() for Shadow DOM
::part は CSS の擬似要素で、一致する part 属性を持つシャドウツリー内の任意の要素を表します。
css
custom-element::part(foo) { /* `foo` の部分に適用するスタイル */ }
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 73 | 79 | 72 | 13.1 | 73 | 13.4 | |
| DOM API | ||||||
| part は Element インターフェイスのプロパティで、この要素の部品識別子（すなわち part 属性を使用して設定されたもの）を DOMTokenList で返します。これらはシャドウ DOM の部品を ::part 擬似要素でスタイル付けするために使用することができます。 | 73 | 79 | 72 | 13.1 | 73 | 13.4 |
| その他 | ||||||
| `::パート` | 73 | 79 | 72 | 13.1 | 73 | 13.4 |
| part グローバル属性は、要素の部品名の空白区切りのリストを指定します。 CSS は部品名を使用して、 ::part 擬似要素を介してシャドウツリー内の特定の要素の選択およびスタイルの設定を行うことができます。 | 73 | 79 | 72 | 13.1 | 73 | 13.4 |
基本構文
HTML
/* Inside the Web Component */
/* <span part="label">Label</span> */
/* External CSS */
my-component::part(label) {
color: #1e40af;
font-weight: bold;
}
my-component::part(icon) {
fill: currentColor;
width: 20px;
}ライブデモ
実務での使いどころ
-
Web Componentsのテーマ対応
Shadow DOM 内の特定パーツを外部テーマに合わせてカスタマイズ。
-
デザインシステムの柔軟性
コンポーネントライブラリが公開パーツを通じてスタイルの上書きを許可。
注意点
- part 属性が設定されていない要素は外部からスタイリングできない。
- ::part() はネストセレクターとの組み合わせに制限がある（子孫セレクター不可）。
アクセシビリティ
- Shadow DOM 内の要素も適切な ARIA 属性を設定する。外部からのスタイル変更でコントラストが損なわれないよう注意。