Skip to main content Accessibility Feedback

But what about the shadow DOM?

I got a lot of responses to my article yesterday about the wrong way to build Web Components that insisted that “HTML only shows when the JavaScript loads” is a necessary (and even good) pattern because the Shadow DOM and slots require it.

I also had some folks mention declarative shadow DOM, which lets you declare elements for the shadow DOM as plain old light DOM HTML, arguing it will “solve this.”

But the shadow DOM, in my opinion, is an anti-pattern.

It provides little benefit, with lots of cost. It’s harder to work with. It’s harder to style. It can break accessibility, depending on how it’s implemented. It requires JavaScript to work.

And declarative shadow DOM doesn’t fix the JS dependency. You may author your code as HTML, but it’s in a <template> element, hidden from the user. It only becomes visible after JS loads.

Update: This is wrong. Declarative Shadow DOM renders without JS, but the other issues related to Shadow DOM remain.

So many of the problems and challenges of working with Web Components just fall away when you ditch the shadow DOM and use them as a light wrapper for progressive enhancement.