In the world of design systems and component libraries, developers need to build encapsulated components so they can confidently use them anywhere in an application. The shadow DOM serves to provide this encapsulation, and ensure that a component’s styles and functionality are not affected in the context of a complete application. In this talk, we’ll learn what the shadow DOM is and how to use it when building reusable components. We’ll use Stencil, a web components compiler, to demonstrate the common use cases of the shadow DOM, and where it fits in the context of a design system.
Using the shadow DOM effectively requires a few strategies that may not be well known to developers who only use the light DOM. In this talk, we’ll see how to take advantage of all kinds of common styling paradigms, from using CSS frameworks to global styles for multiple components, all while maintaining style encapsulation. The shadow DOM, like any tool, should only be used for certain situations, and so we’ll look at when to use and when not to use the shadow DOM. For the times when we can’t use the shadow DOM, we’ll see what other strategies we can use to still achieve encapsulation.
