|
☀️🧠 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! 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! Cheers, Want to share this with others or read it later? View it in a browser. |
0 Komentar untuk "[Go Make Things] Design systems are bad use case for the Shadow DOM in Web Components, actually"