HTML

この記事では、Shadow DOM内の要素を外側のCSSから安全に装飾するためのpart属性と、対応する::part()の使い方を説明します。

An attribute that allows external styles to be applied to specific parts of a custom element.

part 属性

part属性は、カプセル化されたカスタム要素（特にShadow DOM内）にある特定の要素にスタイルを適用するために使います。

通常、Shadow DOMの中身は外から直接スタイルを変更できませんが、part属性を使えば、スタイルを「外から安全に通す穴」を作ることができます。

例えば次のように、Shadow DOM内の要素に part="button" と指定すると、外側のCSSで次のようにスタイルが当てられます。

my-component::part(button) {
	background-color: red;
}

これにより、再利用可能なコンポーネントの一部だけを個別にカスタマイズできます。