`part` et `exportparts` pour le style externe

La stricte encapsulation des styles du DOM fantôme empêche les utilisateurs de restyliser individuellement les éléments internes d'un composant. Les variables CSS conviennent aux propriétés globales, mais vous ne pouvez pas, par exemple, donner au bouton interne de fermeture un border-radius personnalisé. Les parties résolvent ce problème.

Marquez un élément interne à l'arbre fantôme avec part="name". Les utilisateurs peuvent alors le cibler avec le pseudo-élément ::part(name) : my-dialog::part(close-button) { color: red; }. L'élément nommé devient un point d'extension de style, tandis que le reste de l'arbre fantôme demeure encapsulé.

Séparez les noms par des espaces pour exposer un même élément comme plusieurs parties : part="button primary". ::part(button) le cible de manière générique, tandis que ::part(primary) le cible comme un élément de style principal. Chaque nom est mis en correspondance indépendamment.

::part n'autorise que certaines pseudo-classes (:hover, :focus, :disabled), et non les combinateurs de descendants ni d'autres sélections structurelles. ::part(card) p n'est pas valide ; vous ne pouvez pas accéder à l'intérieur d'une partie avec des sélecteurs de descendants.

Lorsqu'un élément personnalisé imbrique un autre élément personnalisé dans son propre arbre fantôme, les parties de l'élément interne ne sont normalement pas exposées à la page externe. L'attribut exportparts="close-button" placé sur l'élément imbriqué transmet ces parties à l'hôte externe.

exportparts="close-button: dismiss" exporte la partie interne sous un nouveau nom sur l'élément externe. Le composant externe peut ainsi présenter une interface de nommage claire, indépendante des éléments internes qu'il compose.

Les propriétés personnalisées exposent des valeurs (couleur, espacement, polices). Les parties exposent des éléments (une interface CSS complète — bordures, transformations, animations). Utilisez les propriétés personnalisées pour les valeurs globales et les parties pour les personnalisations ponctuelles au niveau d'un élément. Les deux peuvent coexister dans le même composant.

Bonne pratique des systèmes de conception : exposez un petit ensemble de parties pour les éléments les plus personnalisés (boutons, en-têtes, indicateurs), ainsi qu'un ensemble généreux de propriétés personnalisées pour les couleurs, l'espacement et la typographie. Les utilisateurs peuvent appliquer un thème au niveau des valeurs ou au niveau des éléments, selon leurs besoins.

Les noms de parties deviennent une composante de l'API publique du composant : les modifier casse le CSS des utilisateurs. Choisissez des noms qui décrivent le rôle de l'élément («close-button», «header», «track») plutôt que sa position («first-button»), afin que l'interface reste pertinente lorsque l'implémentation évolue.

Répertoriez toutes les parties disponibles, ainsi que les parties exportées, dans le fichier README du composant. Sans documentation, les utilisateurs doivent inspecter le DOM pour découvrir les parties, ce qui les couple à ce qu'ils trouvent par hasard. Traitez la liste des parties comme la liste des propriétés d'un composant de framework.

::part et exportparts sont disponibles dans tous les navigateurs modernes. Même les anciennes versions de Safari prennent désormais en charge ::part. Utilisez-les librement ; pour les navigateurs très anciens, aujourd'hui presque disparus, prévoyez comme solution de remplacement des propriétés personnalisées CSS supplémentaires.

Que fait l'attribut exportparts ?

L'attribut part expose des éléments fantômes individuels afin de permettre leur style externe via ::part(name), avec toute la puissance du CSS sans compromettre l'encapsulation. exportparts transmet les parties des éléments personnalisés imbriqués à l'hôte externe, avec la possibilité de les renommer. Combinez les parties avec les propriétés personnalisées CSS pour obtenir une interface de thème complète, et documentez la liste des parties comme faisant partie de l'API du composant.