CSS Parts

Definition

Mécanisme ::part() qui expose des éléments internes du Shadow DOM au style externe. L'attribut part='nom' sur l'élément interne permet au CSS parent de le cibler.

Analogie

Comme des boutons de réglage sur la façade d'un appareil : on peut les ajuster sans ouvrir le boîtier.

Exemple de code

/* Dans le Shadow DOM du composant */
<button part="btn">Click</button>

/* CSS externe */
my-component::part(btn) {
  background: blue;
  color: white;
}

Cas d'usage

Permettre la personnalisation contrôlée du style d'un Web Component sans casser l'encapsulation.

Termes lies