Jean Garutti CTO de vertika.org présente ici une partie du cours Angular 4 - Shadow DOM

1. vertika.org by Jean Garutti -- Angular 4 -- 08/29/17 -- 1
Angular 4
Shadow
DOM

2. info@vertika.org
-- Angular 4 -- -- 2by Jean Garutti
La directive structurelle
Elle est responsable
de tout
Angular l’améliore
encore
Jean Garutti – vertika.org

3. info@vertika.org
-- Angular 4 -- -- 3by Jean Garutti
va chercher la sortie !

4. info@vertika.org
-- Angular 4 -- -- 4by Jean Garutti
 Voici la sortie générée.
Encapsulation CSS
dans le composant

5. info@vertika.org
-- Angular 4 -- -- 5by Jean Garutti
 Vous voyez un élément
racine Shadow
qui isole
SecondComponent
du reste de l’application.
Encapsulation CSS
dans le composant

6. info@vertika.org
-- Angular 4 -- -- 6by Jean Garutti
 Ce comportement est
légèrement différente du
comportement par défaut.
 il isole complètement le
composant, de sorte qu’il
n'hérite pas les styles
globaux .cmp avec ce qui a
été le padding et la margin.
Encapsulation CSS
dans le composant

7. info@vertika.org
-- Angular 4 -- -- 7by Jean Garutti
Encapsulation CSS
dans le composant

8. info@vertika.org
-- Angular 4 -- -- 8by Jean Garutti
 Si vous voulez que
le CSS global par défaut
s'applique aux éléments
Shadow DOM
 vous devez utiliser un sélecteur
CSS spécial
::shadow .cmp { padding: 6px; margin:
6px; }
Encapsulation CSS
dans le composant

9. info@vertika.org
-- Angular 4 -- -- 9by Jean Garutti
 Parfois, c’est rare,
nous souhaitons que les CSS
d'un composant
ne soient pas encapsulés
 et s'appliquent globalement
à toute l’application.
Désactiver l'encapsulation CSS

10. info@vertika.org
-- Angular 4 -- -- 10by Jean Garutti
 Angular permet
de désactiver
l'encapsulation CSS
 des vues.
 Désactivez-la sur le
SecondComponent :
Désactiver l'encapsulation CSS

11. info@vertika.org
-- Angular 4 -- -- 11by Jean Garutti
 en 7 langues
 en présentiel
ou en e-learning
 par des experts
Pour la suite, inscrivez-vous
aux cours Angular 4

12. info@vertika.org
-- Angular 4 -- -- 12by Jean Garutti