Styling dans l'ombre Dom avec des pièces d'ombre CSS

Safari 13.1 a introduit le support pour les pièces d'ombre CSS, ce qui signifie que le sélecteur ::part() est maintenant pris en charge par Chrome, Edge, Opera, Safari et Firefox. Cet article explorera ses utilisations et examinera d'abord les fonctionnalités d'emballage de Shadow Dom.

Avantages de l'emballage Shadow Dom

Chez Giffgaff, nous avons une grande quantité de code CSS écrit par différentes personnes de différentes manières. Voyons quels problèmes cela peut apporter.

Nommer les conflits

Les conflits de nom de classe sont enclins à se produire dans CSS. Un développeur peut créer un nom de classe appelé .price . Un autre développeur (et peut-être même la même personne) peut utiliser le même nom de classe sans le savoir.

CSS ne provoquera aucune erreur. Maintenant, tout élément HTML avec cette classe recevra des styles pour deux choses complètement différentes.

Shadow Dom résout ce problème. Les bibliothèques CSS-in-JS comme Emotion et Styled-Components résolvent également ce problème de différentes manières en générant des noms de classe aléatoires tels que .bwzfXH . Cela aide certainement à éviter les conflits! Cependant, CSS-in-JS n'empêche personne de briser vos composants d'autres manières. Par exemple……

Styles de base et réinitialisation CSS

Les sélecteurs d'éléments HTML peuvent être utilisés (par exemple<button></button> et<div> ) Appliquer des styles. Ces styles peuvent briser le composant. Shadow Dom est le seul mécanisme qui fournit (presque) complètement encapsulé, vous pouvez être assuré que vos composants seront cohérents même dans une base de code importante <code>!important , car chaque composant est encapsulé.

 / * Cela n'affectera pas les boutons à l'intérieur de l'ombre Dom * /
Bouton {fond de fond: Lime! IMPORTANT; }

Je ne pense pas que ce soit une bonne pratique de styliser l'élément de cette façon, mais cela arrive. Même si cela se produit, ces styles n'affectent pas l'ombre DOM.

Il convient de noter que des styles héritables comme la couleur, la police et la hauteur de ligne sont toujours hérités dans Shadow Dom. Pour éviter cela, utilisez all: initial ou de préférence all: revert après mieux que le navigateur prend en charge.

Examinons un exemple commun de CSS appliqué directement aux éléments HTML. Considérez le code de réinitialisation d'Eric Meyer:

 html, corps, div, span, applet, objet, iframe,
H1, H2, H3, H4, H5, H6, P, Blockquote, pré,
ABBR, acronyme, adresse, gros, cite, code,
Del, DFN, EM, IMG, INS, KBD, Q, S, SAMP,
petite grève forte sub sup tt var
b, u, i, centre,
DL, DT, DD, OL, UL, LI,
champ, forme, étiquette, légende,
table, légende, tbody, tfoot, thead, tr, th, td,
Article, mis à part, toile, détails, intégrés,
Figure, Figcaption, pied de page, en-tête, hgroup,
menu, navigation, sortie, rubis, section, résumé,
Temps, Mark, audio, vidéo {
  marge: 0;
  rembourrage: 0;
  bordure: 0;
  taille de police: 100%;
  Police: Héritage;
  Adigne vertical: ligne de base;
}

Que se passe-t-il si le composant que nous utilisons utilise les marges par défaut et les valeurs de rembourrage pour l'agent utilisateur? Cette réinitialisation peut le faire paraître corrompu, car ces valeurs par défaut sont réellement effacées.

Shadow Dom est un moyen d'éviter ces problèmes. Shadow Dom nous permet d'être pleinement convaincus que le composant sera rendu comme prévu, quelle que soit la base de code dans laquelle il se termine. Shadow Dom fournit un niveau d'encapsulation qui ne peut pas être atteint d'autres manières.

L'emballage est génial, mais nous voulons également que nos composants soient sur le thème et personnalisables. ::part facilite beaucoup.

Style Shadow Dom avec :: Part ()

Jusqu'à présent, la seule façon dont CSS peut modifier les styles d'éléments personnalisés à partir de Shadow Dom extérieur est d'utiliser les propriétés personnalisées CSS. Dans un système de conception strict, vous voulez seulement autoriser des changements limités, ce qui peut être idéal. Si vous voulez que votre composant soit plus général, il peut créer des problèmes. Vous devez utiliser des propriétés personnalisées pour définir chaque attribut CSS que vous souhaitez fournir pour le style. Cela semble très compliqué.

Si nous voulons styliser des composants de différentes manières basées sur des pseudo-classes (telles que :hover ), la situation sera encore compliquée. Fondamentalement, nous nous retrouvons avec beaucoup de propriétés personnalisées. Regardons un exemple d'Ionic (un ensemble de composants Web open source). Jetez un œil à toutes les propriétés personnalisées définies sur le composant du bouton ionique.

N'hésitez pas à le vérifier.

J'ai compté 23 propriétés personnalisées. Inutile de dire que c'est loin d'être idéal.

Voici un exemple d'utilisation de ::part() pour styliser des éléments.

Dans cet exemple, je viens de changer les propriétés de couleur, de bordure et d'arrière-plan, mais je peux utiliser n'importe quelle propriété que je veux sans être limitée par les propriétés personnalisées qui ont été définies. Notez que je peux également utiliser des pseudo-classes telles que :hover et :focus pour styliser les différents états du composant.

Dans cet exemple de bouton, l'ensemble du composant est exposé pour le paramètre de style, mais si votre composant Web contient plusieurs éléments HTML, vous pouvez exposer uniquement les parties sélectionnées du composant à ce paramètre de style - d'où la ::part . Cela empêche l'utilisateur du composant de styliser les éléments arbitraires de l'arborescence de l'ombre. Les auteurs de composants sont chargés de révéler les composants qu'ils souhaitent explicitement divulguer. D'autres parties du composant peuvent maintenir la cohérence visuelle ou utiliser des propriétés personnalisées pour obtenir moins de personnalisation.

Alors, comment pouvons-nous définir cela pour nos composants? Voyons comment utiliser ::part pour faire certains éléments d'un style de composant Web. Tout ce que nous faisons est d'ajouter une propriété part à l'élément que nous voulons exposer.

<div part="box"> ...</div>
<button>Cliquez sur moi</button>

Dans cet exemple, div peut être personnalisé à l'aide de la portée CSS complète - tous les attributs CSS peuvent être modifiés. Mais le bouton est verrouillé - personne ne peut changer ses effets visuels à l'exception de l'auteur du composant.

Tout comme les éléments HTML peuvent avoir plusieurs noms de classe, un élément peut également avoir plusieurs noms part :

<div part="box thing"> ...</div>

C'est ce que nous obtenons avec ::part : En exposant la "partie" de l'élément, nous pouvons offrir une certaine flexibilité sur la façon d'utiliser des composants Web tout en les protégeant dans d'autres domaines. Qu'il s'agisse de votre système de conception, de votre bibliothèque de composants ou de quoi que ce soit d'autre, le fait que CSS Shadow Parts devienne grand public nous fournit un autre outil passionnant.