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.

If you’ve ever built a backend MVC style (Model, View, Controller) it’s very similar but for web documents instead of remote procedure calls.

I think the other comment was an excellent explanation of what the DOM is for somebody with a little bit of computer science experience at least.

But front end vs back end development explained like youre five:

• a front end developer makes what you can see when you use some software (the term is mostly used when talking about web development, but almost all business software is websites today). So they know how to place buttons in the right place, how to make it look good or move around or what ever you want your website to do. I.E display a form to fill out when you want to check out your shopping basket in a web shop.

• a back end developer makes the logic that happens behind the scenes and makes it available for the front end. I.E. Pass on the data from the form the user just entered to the orders database.

• a full stack developer knows how to do both.

Edit: just realised I misunderstood your question. Keeping the comment though since somebody Else might not know the difference between backend and frontend