Web component

Consiste en 4 technologies :

• Custom Elements
• HTML imports
• Templates
• Shadow DOM

Styliser un web component

Les options pour styliser un web component qui a un shadow dom :

• mettre un shadow root open
• Depuis le CSS
  • utiliser le composant en tant que sélecteur lui même "mon-web-component { color: blue; }" mais on ne peut pas utiliser des sélecteurs internes (.test)
  • sélecteur ::slotted, mais ne fonctionne à priori que dans le webcomponent lui même
  • Variables CSS (car elles traversent le shadow dom même fermé)
• Depuis l'HTML
  • Style inline : bof
  • Avoir une prop de style

Sources

• Shadow DOM styling (google dev)
• Styling a web component (css-tricks)