The Shadow DOM and You.

Not as scary as it sounds

I’ve been spending a lot of time in the world of Web Components over the last few weeks, utilizing the power of Stencil.js to create modular reusable custome. These can then be shipped off as an NPM package and pulled down to use in React, Vue, Angular, Node.js, or many other frameworks and web development solutions that you are already using.

While a framework agnostic component is a huge selling point for me and many others, the real power in web components comes in their ability to leverage the shadow DOM to encapsulate the CSS within that component. That’s right, no more leaky stylesheets or conflicting selectors to worry about. If you want to style that lonely<p> element in your component using p as a selector, go for it, the shadow DOM is here for you. The code that’s inside, stays inside

So What is the Shadow DOM?

The shadow DOM allows for a hidden DOM tree that can be attached to elements in the regular DOM tree. The shadow tree begins with a shadow root, below that you can attach any elements you want in the same way you already attach elements to regular DOM nodes. From there you can access those elements and append children, set attributes, style those nodes, etc.

I’m a visual learner

Also of note, you are able to create the shadow tree with an option of open or close, hiding the shadow tree from users if you wish. You’ve already come across this behavior without realizing it in elements such as <video>. In the DOM you only see the <video> element, but the buttons and controls are hidden away in it’s closed shadow DOM.

This custom element has it’s Shadow DOM accessible, but it is possible to hide the Shadow DOM from users like in the case of the <video> element

Is that it?

Yup, pretty much! There is not much to it, it’s really just an encapsulated version of the DOM you already know and interact with. I could go into some examples of attaching the shadow DOM to elements and building web components, but I think that is beyond the scope of this article. I really just wanted to introduce people to the concept at a high level and hopefully generate some interest in web components. I’ll be preparing some Stencil.js specific tutorials that’ll go into more detail soon, but if this article has piqued your interest and you can’t wait to get started, check out the links below.

Further Exploration

• Web Components & Stencil.js: Build Custom HTML Elements — This Udemy course by Maximilian Schwarzmüller is the first place I point people who are ready to dive in. Max really walks you through the process of building vanilla web components using HTML, CSS, and Javascript and, once comfortable there, takes you through the process of building them using Stencil.
• MDN Web Docs: Web Components — If you’re a web developer, you’ve most likely spent time on Mozilla’s docs. Always a helpful resource and their web component section is no different, with a nice overview of the technology and some basic tutorials.
• Stencil.js — You’re saying to yourself, “I don’t need no stinking intro to web components, just give me this Stencil stuff you’re so excited about!” Well here you are friend, go ham. However, I recommend learning about and building some vanilla web components before you let Stencil abstract some of that away from you. That being said, their documentation is great and they have an active Slack where you can talk to other people who are as excited about this stuff as I am.