When building web components, some might actually be surprised to know that there is a choice of DOM available to you. Each option represents a different solution that answers a different set of needs. Neither is better than the other, only more appropriate to use in one situation versus another. These two DOMs are shadow and light.
Light DOM
In short, the Light DOM is the one you’re already familiar with in the JS world. Your web component becomes part of its parent DOM tree and the child elements inside of it are visible as well.
For example, say you build a web component that has two child elements, a button and a span. In the Light DOM, using the JS syntax you’re already used to for accessing them would work here just fine. Also, all the global CSS and JS is affecting them as well.
Shadow DOM
In contrast to the Light DOM, the Shadow DOM is meant for isolation. This is so because in the Shadow DOM there are no interactions with the parent DOM tree. All global parent CSS or JS is not accessible inside of it, and it lives in its own separate DOM tree invisible to the parent DOM tree in the Light DOM.
Deciding Between The Two
Because they both solve very different requirement sets, choosing between the DOM options isn’t too difficult. In situations where you want your component to easily interact, and be fully available to its parent node and DOM tree, Light DOM is the best option. In situations where you want your component isolated from everything going on around it, then the Shadow DOM is best.
In Closing
Not all technology decisions need too much deep thought for the most optimal choice. It just takes an open mind, understanding of your use cases, and what is available to you. Having two options in how you build your Web Components is great because it gives you the flexibility to build out your application to the best of your ability.