Steps To Understanding the Shadow DOM

As we move forward in 2019, it is quite clear that front end development has become very important. The focus of development has been brought closer to the user interface.

Therefore in recent times, front end developers have been breaking up their websites into a vast array of components. This is to make it easier to develop in smaller batches. Under the agile methodology, we build components to match a feature or a collection of features.

As it currently stands, there are some issues that have caused component-based development to be tricky. One of the issues that we have to deal with is having our CSS styles apply to our entire document. No matter where we write it.

The DOM as we know it

So today in most browsers, we work with a singular DOM tree that represents the entire page that is loaded into the browser. Because we have the one tree, this means that all javascript and CSS that is written works against this entire document tree.

But what if we wish to import part of the markup as part of a reusable component, and this component should have its own styling that is isolated from the rest of our document? Here is an example.

<p class="highlight">This is a globally highlighted paragraph</p> 

<div> 
  <p class="highlight">This is a…