When is the shadow DOM useful?

This content originally appeared on Go Make Things and was authored by Go Make Things

I generally think the Shadow DOM is an antipattern.

A lot of developers are really surprised to hear that. It’s probably the opinion of mine that gets the most pushback.

After all, when Web Components were first announced, a lot of early advocates touted the Shadow DOM as the killer feature of the API. It was a big part of the push to get devs from framework land sold on them.

Let’s dig in…

What the Shadow DOM does

The Shadow DOM provides encapsulation. It keeps your HTML isolated from the rest of the DOM.

If you’re used to building in React, that mental model makes sense. Hell, it’s probably desirable!

But if you’re used to building with the grain of the web—taking advantage of the speed of raw HTML and the power of the cascade—then encapsulation is a hindrance. Your HTML doesn’t load without JS. Your CSS doesn’t inherit.

Don’t bring React thinking to the native web.

When is encapsulation good, then?

That said, there are times when encapsulation can be useful. I reach for the Shadow DOM, when…

1. I’m building third-party UI components that will be loaded on many different developer’s websites, and
2. I want the styles to be completely unaffected by the global style system.

While the first item is quite common, the second rarely is.

Generally speaking, inheriting styles from the parent site is a good thing. I want my script UI to look like it belongs on the site where it’s being loaded.

One example that specifically comes to mind is some sort of third-party widget, the kind of thing you’d typically use an iframe for. An embedded map or branded widget of some kind.

The thing is, most projects aren’t that.

This content originally appeared on Go Make Things and was authored by Go Make Things

Print Share Comment Cite Upload Translate Updates

APA

Go Make Things | Sciencx (2024-10-18T14:30:00+00:00) When is the shadow DOM useful?. Retrieved from https://www.scien.cx/2024/10/18/when-is-the-shadow-dom-useful/

MLA

" » When is the shadow DOM useful?." Go Make Things | Sciencx - Friday October 18, 2024, https://www.scien.cx/2024/10/18/when-is-the-shadow-dom-useful/

HARVARD

Go Make Things | Sciencx Friday October 18, 2024 » When is the shadow DOM useful?., viewed ,<https://www.scien.cx/2024/10/18/when-is-the-shadow-dom-useful/>

VANCOUVER

Go Make Things | Sciencx - » When is the shadow DOM useful?. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/10/18/when-is-the-shadow-dom-useful/

CHICAGO

" » When is the shadow DOM useful?." Go Make Things | Sciencx - Accessed . https://www.scien.cx/2024/10/18/when-is-the-shadow-dom-useful/

IEEE

" » When is the shadow DOM useful?." Go Make Things | Sciencx [Online]. Available: https://www.scien.cx/2024/10/18/when-is-the-shadow-dom-useful/. [Accessed: ]

rf:citation

» When is the shadow DOM useful? | Go Make Things | Sciencx | https://www.scien.cx/2024/10/18/when-is-the-shadow-dom-useful/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.