The Document Object Model (DOM) is an object-oriented representation of the structure, styles, and content of HTML. It exposes the document as nodes and objects, in a tree-like structure, that programming languages such as JavaScript can manipulate. The Shadow DOM allows for hidden DOM trees to be added to the document DOM tree. These hidden DOM trees are isolated from the parent DOM tree, confining the scope of the CSS to the web component, allowing repeated classes and IDs found in the parent without interaction. This is how styling encapsulation and web component creation are achieved.
Andromeda CTO Martine Dowden breaks down how components are created, how the shadow DOM works, and the ins and outs of styling components. The code used in this guide can be found on github.
Read the blog on Pluralsight: Styling Web Components