L'article explore l'utilisation du Shadow DOM dans le cadre des Web Components. L'auteur explique que les Web Components ne se limitent pas aux Custom Elements, mais incluent également le Shadow DOM et les HTML Templates, chacun jouant un rôle spécifique. Le Shadow DOM permet d'encapsuler le HTML et le CSS, isolant ainsi les composants pour éviter les conflits et maintenir une séparation claire des préoccupations. L'article aborde les raisons d'être du Shadow DOM, son utilisation pour isoler les composants dans les applications web modernes, et comment il peut être instancié de manière impérative ou déclarative. L'auteur discute également des différentes options de configuration du Shadow DOM, comme les modes ouvert et fermé, et des fonctionnalités avancées telles que les contenus slottés, qui permettent d'injecter sélectivement du contenu dans les composants. Enfin, l'article souligne l'importance de la maîtrise du Shadow DOM pour améliorer la stabilité, la réutilisabilité et la sécurité des applications web.

Dans son article, Lea Verou aborde les défis rencontrés lors de la création de composants web accessibles et localisables en 2025, tout en présentant deux composants qu'elle a développés pour afficher les "likes" de Bluesky. Elle partage des conseils pratiques sur l'utilisation des éléments <slot> et des attributs pour la personnalisation, tout en mettant l'accent sur la balance bénéfice / effort de développement.

Une excellente introduction aux Web Components

Tout est dans le titre

Tout est dans le titre

Tout est dans le titre

Tout est dans le titre

Suite de https://lorenzofox.dev/posts/coroutine tout est dans le titre

Tout est dans le titre

Eric Meyer décrit une approche très intéressante de l'écriture de web components. À tester

Tout est dans le titre

Tout est dans le titre

Une bibliothèque de composants, concurrente de Bootstrap - l'approche est intéressante car utilisant des Web Components

Tout est dans le titre

Tout est dans le titre

Tout est dans le titre

Tout est dans le titre sauf qu'il s'agit d'un web component

L'auteur pointe du doigt un problème des web components : l'absence de dégradation gracieuse. Il est possible d'y remédier en incluant le contenu en fallback.

Par exemple, si on crée un composant "my-gallery" :

<my-gallery />

on peut inclure le contenu de celle-ci :

<my-gallery>
  <img src="..." />
  <img src="..." />
  <img src="..." />
</my-gallery>

Si le JavaScript est désactivé, l'utilisateur aura malgré tout l'ensemble des images.

Tout est dans le titre

Tout est dans le titre