part

Description

L’attribut part est utilisé dans les Web Components pour nommer des éléments internes du Shadow DOM qui doivent être stylisables depuis l’extérieur du composant. Un élément peut avoir plusieurs parts (séparées par des espaces). Le CSS externe cible ces parts avec nom-composant::part(nom-part).

Syntaxe

<!-- Dans le Shadow DOM d'un composant -->
<button part="bouton">Cliquez</button>
<span part="etiquette texte">Libellé</span>

Exemples

Définition d’un composant avec parts :

<template id="ma-carte">
  <style>
    :host { display: block; border: 1px solid #ccc; border-radius: 8px; }
  </style>
  <header part="entete">
    <slot name="titre">Titre</slot>
  </header>
  <div part="corps">
    <slot>Contenu</slot>
  </div>
  <footer part="pied">
    <slot name="actions"></slot>
  </footer>
</template>

CSS externe stylisant les parts :

ma-carte::part(entete) {
  background: #336699;
  color: white;
  padding: 1rem;
}

ma-carte::part(corps) {
  padding: 1rem;
}

ma-carte::part(pied) {
  border-top: 1px solid #ddd;
  padding: 0.5rem;
  text-align: right;
}

Notes

Encapsulation contrôlée : part est la seule façon de permettre le style CSS externe à travers la frontière du Shadow DOM. Sans part, le Shadow DOM est totalement opaque au CSS externe.

Plusieurs noms : part="bouton primaire" expose l’élément sous deux noms de parts — utile pour des variantes (::part(bouton) et ::part(primaire)).

exportparts pour l’imbrication : si un composant contient un autre composant avec des parts, utiliser exportparts pour les propager à travers plusieurs niveaux de Shadow DOM.