exportparts

Description

L’attribut exportparts est utilisé dans les Web Components pour re-exporter les parts d’un Shadow DOM imbriqué. Alors que part expose des éléments internes d’un composant au CSS externe, exportparts permet de propager ces parts à travers plusieurs niveaux de Shadow DOM (composants composés d’autres composants).

Syntaxe

<!-- Composant qui re-exporte les parts d'un sous-composant -->
<mon-composant exportparts="bouton, icone"></mon-composant>

Exemples

Composant parent qui expose les parts d’un enfant :

<!-- Définition de mon-bouton -->
<template id="mon-bouton">
  <shadow-root>
    <span part="icone">★</span>
    <button part="bouton">Clic</button>
  </shadow-root>
</template>

<!-- Composant parent intégrant mon-bouton et re-exportant ses parts -->
<template id="ma-carte">
  <shadow-root>
    <mon-bouton exportparts="bouton: carte-bouton, icone: carte-icone"></mon-bouton>
  </shadow-root>
</template>

Ciblage CSS depuis l’extérieur :

/* Style le bouton intérieur depuis l'extérieur de ma-carte */
ma-carte::part(carte-bouton) {
  background: navy;
  color: white;
}

Notes

Renommage de parts : exportparts="interne: externe" permet de renommer la part lors de l’export, évitant les conflits de noms entre composants.

Complément de part : part expose les éléments du Shadow DOM immédiat ; exportparts propage ces expositions à travers les niveaux d’imbrication.

Usage avancé : exportparts est principalement utile lors de la composition de Web Components, un cas d’usage avancé. Pour des composants simples, seul part est nécessaire.