An attribute that allows external styles to be applied to specific parts of a custom element.
part
属性は、カプセル化されたカスタム要素(特にShadow DOM内)にある特定の要素にスタイルを適用するために使います。
通常、Shadow DOMの中身は外から直接スタイルを変更できませんが、part
属性を使えば、スタイルを「外から安全に通す穴」を作ることができます。
例えば次のように、Shadow DOM内の要素に part="button"
と指定すると、外側のCSSで次のようにスタイルが当てられます。
CSS
my-component::part(button) {
background-color: red;
}
これにより、再利用可能なコンポーネントの一部だけを個別にカスタマイズできます。