# Shadow DOM

Inclus dans les spécs des Web Components qui sont :

  • HTML Templates
  • Custom Elements
  • HTML Imports
  • Shadow DOM

# Buts

Le but est de créer ses propres balises HTML (directives / components en angular)

Buts du Shadow DOM :

  • Isoler le DOM (depuis l'extérieur, cacher l'arbre des composants du shadow DOM)
  • Contrôler la portée du CSS
    • le CSS de la page n'impacte pas le composant
    • le CSS du composant n'impacte pas la page

# Support navigateurs

http://caniuse.com/#feat=shadowdomv1

Angular permet de supporter le shadow DOM du point de vue des composants. Option ViewEncapsulation.Native à ajouter à la définition du @Component.

React et VuesJS ont du support via un module tiers.

# Avantages / inconvénients

# Avantages

  • Cloisonnement du CSS
  • Mécanisme de composition
  • Web Components
  • Standard W3C

# Inconvéninents

  • Support des navigateurs pas encore super top (2017)
  • Polyfills complexes
  • Partage de CSS commun compliqué (usage de CSS commun dans les composants)
  • Encapsulation du CSS (CSS modules + efficace)

# Ressources

Le ShadowDOM pour les nuls (Romain Linsolas) Devoxx2017