🦺 Permettre d’appliquer du style au composant du webring

[joachimesque]

En ce moment, le script du Webring génère un composant web ayant un Shadow DOM.

Cette décision a été prise pour garantir qu’il n’y ait pas de risque de polluer les styles dans les deux sens (que les styles du script ne s’appliquent pas à la page, et vice versa).

Pour proposer les styles, je vois trois solutions :

• Supprimer le Shadow DOM (PR ☢️ [script] Remove shadow-DOM #9)
• Utiliser des propriétés custom CSS pour les valeurs basiques (font-size, font-family, color…), qui pourront être passées au composant <now-webring style="--font-size: 16px;">
• Utiliser un élément <style> comme enfant facultatif de <now-webring> avec attribut slot="custom-styles", qui serait ajouté au sein du Shadow DOM

Quelle serait la meilleure solution d’après vous ?

[joachimesque]

J’ai trouvé la solution, je pense qu’en utilisant ::part on peut y arriver.

Voir #11

[joachimesque]

La PR #11 a été fondue dans le reste du code. Pour styler un élément, on peut maintenant utiliser le sélecteur ::part(). La doc va suivre.

    now-webring::part(a) {
      color: rebeccapurple;
    }