Ich denke, Shadow DOM können wir erreichen, Stil Kapselung und auch ausblenden HTML-Implementierung der Komponente.Was lässt uns Shadow DOM erreichen?
Aber wenn ich Shadow-Root in Chrom überprüfen, kann ich das HTML der Komponente sehen. 
Also was genau hilft uns das zu erreichen? Ist es nur Stilkapselung?
Sicher, die DevTools erlauben es Ihnen, das Schatten-DOM zu untersuchen, aber wenn Sie das HTML für index.htmlquerySelector('body').innerHTML erhalten, ist das Schatten-DOM der Elemente nicht enthalten.
Sie müssen explizit zum Schatten-DOM eines benutzerdefinierten Elements wechseln, um auf dieses HTML zugreifen zu können.
Bei Shadow DOM geht es nicht darum, die Implementierung der Elemente vor anderen Entwicklern zu verbergen, sondern vor CSS, JS oder anderen Mitteln, die sie versehentlich lesen oder manipulieren könnten.
Dies ermöglicht es, die Komplexität des DOM einer ganzen Anwendung auf kleinere Teile zu reduzieren, die besser zu verwalten sind.
'Chrome Dev Tools> Einstellungen> Einstellungen> Elemente> Benutzer-Agent Schatten-DOM anzeigen (überprüfen) –
Benutzer erstellt Shadow DOM (die von einer Komponente erstellt mit Polymer erstellt) ist sichtbar durch Standard in den DevTools. Das "User Agent Shadow DOM anzeigen" ist nur für die nativen Elemente wie
Mögliche Duplikate von [Brauchen Sie Hilfe, Shadow DOM zu verstehen] (http://StackOverflow.com/Questions/36656667/Need-Help-Verstanden-Shadow-Dom) – TylerH
Siehe auch http://StackOverflow.com/questions/33452347/shadow-dom-point-of-using-it – TylerH