【HTML Living Standard】part属性の使い方
part属性の使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
partプロパティは、Web ComponentsのShadow DOM内部にある要素に、外部からCSSスタイルを適用するための名前を保持するプロパティです。このグローバル属性は、主にWeb Componentsにおけるカプセル化されたコンポーネントのデザインカスタマイズを可能にします。
Web Components技術の一つであるShadow DOMは、コンポーネントの内部構造とスタイルを外部から完全に隔離する仕組みを提供します。これにより、コンポーネントのスタイルが外部に影響を与えたり、外部から意図しないスタイルが適用されたりすることを防ぎ、再利用性や堅牢性を高めます。しかし、このカプセル化の性質上、コンポーネントの内部の特定の要素の見た目を外部から変更したい場合に課題が生じます。
partプロパティは、この課題を解決するために導入されました。Shadow DOM内部の要素にpartプロパティを設定し、任意の識別名（part名）をスペース区切りで付与することで、その要素を外部から参照できるようになります。その後、Web Componentsのホスト要素（Shadow DOMを持つコンポーネント自体）に対して::part()疑似要素を使用し、指定したpart名を用いて内部の要素を選択し、CSSでスタイリングすることが可能になります。
これにより、Web Componentsが提供する厳密なカプセル化を維持しつつ、ユーザーや開発者がコンポーネントの見た目を柔軟にカスタマイズできる設計を実現します。
公式リファレンス: HTML part global attribute
構文(syntax)
1<div part="header main-content"></div>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません