As a backend developer this could equally be real front end stuff or satire to take the piss out of it. To me the entire DOM stuff is as understandable as magical lore anyway.
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.
As a backend developer this could equally be real front end stuff or satire to take the piss out of it. To me the entire DOM stuff is as understandable as magical lore anyway.
Everyone knows you just keep guessing until you get it right.
Don’t worry about how janky or slow it makes the UI. That’s basically a requirement for the modern browser.
Shadow DOM trees are very real, and I feel like a Wizard trying to decrypt ancient runes every time I have to deal with them, so you’re not far off.
ELI a Backend Developer?
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.