Design systems are bad use case for the Shadow DOM in Web Components, actually

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

I think the shadow DOM is an anti-pattern.

One of the big “use cases” for it that I hear people bring up is in design systems, where you might not want people messing with the HTML or CSS and breaking your intended UI. A few years ago, I was one of those people!

But a design system is, in my opinion, a great example of where the Shadow DOM actually fails hard.

Global CSS doesn’t bleed into the shadow DOM (which is the point), but that means that your design system can now no longer benefit from having a global CSS file or take advantage of the cascade.

Each item is its own discreet thing, so you’re repeating your styles a lot more across each one with shared design aspects.

This in-turn bloats the entire UI, making it much bigger than it needed to be, resulting in more places for the UI to move out-of-sync with the design, and slowing down the site or app for your users.

Web components can be an amazing tool for your design system.

It can let your team drop interactive components into any framework (or not!) of their choice, and make their lives easier. But a design system isn’t a cop, it’s a coach.

If you try to use the Shadow DOM to force things on your devs, they’ll just work around it or ditch the system altogether.

If you want help figuring out how to implement Web Components into your design system, get in touch. I’d be happy to work with you!

☀️🧠 Summer of Learning Sale! Join the Lean Web Club today and get 1 month free, plus 30% off for the first three months after that. Click here to join for free now!

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-07-02T14:30:00+00:00) Design systems are bad use case for the Shadow DOM in Web Components, actually. Retrieved from https://www.scien.cx/2024/07/02/design-systems-are-bad-use-case-for-the-shadow-dom-in-web-components-actually/

MLA

" » Design systems are bad use case for the Shadow DOM in Web Components, actually." Go Make Things | Sciencx - Tuesday July 2, 2024, https://www.scien.cx/2024/07/02/design-systems-are-bad-use-case-for-the-shadow-dom-in-web-components-actually/

HARVARD

Go Make Things | Sciencx Tuesday July 2, 2024 » Design systems are bad use case for the Shadow DOM in Web Components, actually., viewed ,<https://www.scien.cx/2024/07/02/design-systems-are-bad-use-case-for-the-shadow-dom-in-web-components-actually/>

VANCOUVER

Go Make Things | Sciencx - » Design systems are bad use case for the Shadow DOM in Web Components, actually. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/07/02/design-systems-are-bad-use-case-for-the-shadow-dom-in-web-components-actually/

CHICAGO

" » Design systems are bad use case for the Shadow DOM in Web Components, actually." Go Make Things | Sciencx - Accessed . https://www.scien.cx/2024/07/02/design-systems-are-bad-use-case-for-the-shadow-dom-in-web-components-actually/

IEEE

" » Design systems are bad use case for the Shadow DOM in Web Components, actually." Go Make Things | Sciencx [Online]. Available: https://www.scien.cx/2024/07/02/design-systems-are-bad-use-case-for-the-shadow-dom-in-web-components-actually/. [Accessed: ]

rf:citation

» Design systems are bad use case for the Shadow DOM in Web Components, actually | Go Make Things | Sciencx | https://www.scien.cx/2024/07/02/design-systems-are-bad-use-case-for-the-shadow-dom-in-web-components-actually/ |

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.