HTML

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で次のようにスタイルが当てられます。

CSS

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

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