All about Web Components

Web development can feel overwhelming. Different languages, constant code rewriting. But wait, there's a solution: Web Components. They're like the web's universal language, simplifying everything.

They function like standard HTML elements in browsers. These components rely on three key technologies:

• Custom elements: Define new or extend existing HTML tags

• Shadow DOM: Encapsulate custom elements' structure, style, behavior

• HTML templates: Aid reusable markup templates creation
  
  Benefits:

• Framework-agnostic

• Standardization, UI consistency across all platforms

• Efficiency ->ave time + money

• Highly customisable

• Browser support

• Future-proof

• Browser support

  
  

Cons:

• Older browsers support issues

• Learning curve

• Complex components can be less performant

So, are Web Components a thing yet? Yes.

Useful Resources

• Primitives

• White label DS

• Shoelace

• Web Components

• An introduction to Web Components

• Web Components are Easier Than You Think

• React integration for Web components

Design Systems

• Nordhealth (Nord DS)

• Adobe (Spectrum DS)

• Carbon DS

• Porsche

• Adobe Spectrum Design System

• IBM Carbon Design System

• Microsoft FAST Design System

• Salesforce Lightning Design System

• SAP Fiori

• Vaadin Design System

🔗 Here is a comprehensive list of companies using web components ->