If I would have to list the main reasons why Web Components work so greatly for Duet Design System, it would be these four things:
Tech-Agnostic Instead Of Tech-Specific
In order to create modular interfaces, a design system needs to be technology-agnostic instead of technology-specific. Web Components offer this benefit and make it easier to reduce our design system’s complexity and improve its reusability.
Future Proofing With Web Standards
Web Standards are more future proof than any given JavaScript framework. I’ve seen different frameworks come and go during my almost two decade long career on the web, but Web Standards keep thriving and evolving.
Any Framework Or No Framework
Web Components can be used with basically any JavaScript framework or no framework at all. This means we’re able to support all our product teams from a single codebase. This makes it possible for our small design system team to be very efficient. Currently we can offer support for all of the following with just one set of components:
Full Encapsulation
Shadow DOM allows components to have their own DOM tree that can’t be accidentally accessed from the main document. For us this means that “everything just works” when the components are implemented onto different environments and platforms. Styles cannot penetrate a component from the outside, and styles inside a component won’t bleed out.