Pluralsight - Styling Web Components

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


Looking for a partner to support your core business practices? Our solutions have you covered.

  • Training
  • Product Management
  • Product Development
Read more about Solutions with Andromeda