CODEWITHSUNDEEP
htmlangularweb-componentshadow-dom
Narayan Prusty
Narayan Prusty

Reputation: 2581

What does Shadow DOM let us achieve?

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?

Upvotes: 6

Views: 832

Answers (1)

Günter Zöchbauer
Günter Zöchbauer

Reputation: 657168

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.

Upvotes: 7

Related Questions