6

I think shadow DOM lets us achieve style encapsulation and also hiding HTML implementation of the component.

But when I inspect shadow root in chrome I can see the HTML of the component. enter image description here

So what exactly does it help us to achieve? Is it only style encapsulation?

Narayan Prusty
  • 2,501
  • 3
  • 22
  • 41
  • Possible duplicate of [Need help understand Shadow DOM](http://stackoverflow.com/questions/36656667/need-help-understand-shadow-dom) – TylerH Apr 22 '16 at 13:23
  • Also see http://stackoverflow.com/questions/33452347/shadow-dom-aim-of-using-it – TylerH Apr 22 '16 at 13:24

1 Answers1

7

Sure, the DevTools allow you to investigate the shadow DOM but if you get the HTML for index.html querySelector('body').innerHTML the shadow DOM of the elements is not included.

You explicitly need to switch to the shadow DOM of a custom element to get access to that HTML.

Shadow DOM is not about hiding your elements implementation from other developers, it's about hiding it from CSS, JS or other means that might accidentally read or manipulate it.

This allows to break down complexity of the DOM of a whole application to smaller parts that are better manageable.

Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • 1
    `Chrome Dev Tools > Settings > Preferences > Elements > Show user agent shadow DOM` (check) – Ankit Singh Apr 22 '16 at 10:03
  • User created Shadow DOM (that created by component built using Polymer) is viewable by default in the DevTools. The "Show user agent shadow DOM" is only for the native elements like – Günter Zöchbauer Apr 22 '16 at 10:06