What is Shadow DOM. Could someone explain it in detail with any analogy/metaphor?

Question

What is Shadow DOM. Could someone explain it in detail with any analogy/metaphor?

In: 2

Answer 1

A shadow DOM is a way of attaching CSS to a child node that doesn’t interact with the rest of the DOM. So if you have a document that uses a particular CSS, but you have a custom control that needs its own CSS to work, you use a shadow DOM to give it its own CSS within the larger document, without the larger document having to know that there’s custom CSS.

In principle it’s the same as encapsulation in software design. It’s letting the larger application be ignorant of the specifics of some or all of the component pieces.