L'article "Referencing HTML elements inside Shadow DOM" de HTMHell aborde les défis liés à l'accessibilité des composants Web utilisant le Shadow DOM. Il explique comment référencer des éléments HTML encapsulés dans le Shadow DOM, en particulier pour les composants comme les cases à cocher. Le problème principal est que les éléments à l'intérieur du Shadow DOM ne peuvent pas être directement référencés, ce qui pose des problèmes d'accessibilité. L'auteur propose une solution en deux phases, avec la Phase 1 déjà disponible dans Chrome Canary. Cette phase introduit l'attribut shadowRootReferenceTarget pour permettre aux éléments comme les étiquettes (<label>) de référencer correctement les éléments internes du Shadow DOM, améliorant ainsi l'accessibilité et la fonctionnalité des composants Web.
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.
Tout est dans le titre
Eric Meyer décrit une approche très intéressante de l'écriture de web components. À tester
Conférence sur le Shadow DOM
Tout est dans le titre...
Tout est dans le titre
Un exemple d'utilisation du Shadow DOM : remplacer la balise par une icône tout en gardant la fonctionnalité de sélection de fichier...
Tout est dans le titre... Pas sûr d'avoir tout compris