Widely available YES。全主要ブラウザで対応済み。Baseline Widely available。Web Components利用時に推奨。
セレクター Widely available

::part() for Shadow DOM

::part() は Shadow DOM 内で part 属性が付与された要素を外部のCSSからスタイリングできる。Web Components のカプセル化を維持しつつ、必要な部分だけを公開してカスタマイズ可能にする仕組み。

Web Componentsスタイリング

概要

::part() は Shadow DOM 内で part 属性が付与された要素を外部のCSSからスタイリングできる。Web Components のカプセル化を維持しつつ、必要な部分だけを公開してカスタマイズ可能にする仕組み。

対応ブラウザ

デスクトップ

Chrome 73+
Edge 79+
Safari 13.1+
Firefox 72+

モバイル

Chrome Android 73+
Safari iOS 13.4+
Firefox Android 79+

基本構文

HTML 
/* Web Component 内部 */
/* <span part="label">ラベル</span> */

/* 外部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 属性を設定する。外部からのスタイル変更でコントラストが損なわれないよう注意。

参考リンク