The browser has an internal model for representing the HTML document, called the Document Object Model (DOM). This DOM happens to be tree-shaped, because HTML is tree-shaped. And certain logic in a browser gets applied to subtrees, like e.g. most CSS rules.
Sometimes, however, you want a subtree to not get affected by what’s going on in the main tree, for example when including an SVG into that tree, or if you’re offering JavaScript library with a pre-built component.
And yeah, that is what the Shadow DOM does. It also shields the rest of the DOM from what you’re doing inside the Shadow DOM. And there’s certain mechanisms to selectively allow interaction across the shadow boundary, e.g. when providing a pre-built component, you might still want the user to be able to style parts of it.
The browser has an internal model for representing the HTML document, called the Document Object Model (DOM). This DOM happens to be tree-shaped, because HTML is tree-shaped. And certain logic in a browser gets applied to subtrees, like e.g. most CSS rules.
Sometimes, however, you want a subtree to not get affected by what’s going on in the main tree, for example when including an SVG into that tree, or if you’re offering JavaScript library with a pre-built component.
And yeah, that is what the Shadow DOM does. It also shields the rest of the DOM from what you’re doing inside the Shadow DOM. And there’s certain mechanisms to selectively allow interaction across the shadow boundary, e.g. when providing a pre-built component, you might still want the user to be able to style parts of it.