What does Shadow DOM let us achieve?

Question

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.

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

Answer 1

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.