【CSS Modules】::part疑似要素の使い方

::part()オブジェクトは、WebコンポーネントのシャドウDOM (Shadow DOM) 内部において、カスタム要素の開発者が意図的に外部へ公開した特定の「パーツ」を表すオブジェクトです。

シャドウDOMは、Webコンポーネントの内部構造を外部から隠蔽し、スタイルや振る舞いが外部に影響を与えたり受けたりしないようにする強力な技術です。しかし、これによりコンポーネントの利用者がその外観を部分的にカスタマイズしたい場合に、内部へのアクセスが制限されるという課題が生じます。

::part()は、この課題を解決するために提供されるCSS擬似要素の一種です。カスタム要素の開発者は、シャドウDOM内の特定の要素にpart属性を指定することで、その要素を「公開されたパーツ」としてマークできます。例えば、<my-button>というカスタム要素のシャドウDOM内部に<span part="label">Submit</span>という要素がある場合、外部のスタイルシートからmy-button::part(label)というセレクターを使って、この<span>要素のスタイルを直接変更できるようになります。

この機能により、コンポーネントの厳密なカプセル化を維持しつつ、利用者が個々の「パーツ」の見た目を柔軟にカスタマイズできる仕組みが実現されます。これは、再利用性の高いWebコンポーネントを構築し、多様なデザインニーズに対応するために非常に重要な機能です。

Copy
1element-name::part(part-name) {
2  /* style properties */
3  color: blue;
4  font-weight: bold;
5}

引数なし

引数はありません

戻り値なし

戻り値はありません