Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The (Real) State of Web Components

The (Real) State of Web Components

2018 is gonna be the year of Web Components they said... Was it? The year is 2019 and people are asking, are Web Components everywhere? Probably not. Why?

This talk will try to answer all these questions you might be asking yourself, by going through a real evaluation of Web Components as the primary tool for authoring web pages and applications.

Martin Hochel

October 04, 2019

More Decks by Martin Hochel

Other Decks in Programming


  1. Martin Hochel Principal Engineer @Productboard, GDE WEB, Microsoft MVP Prague

    / Czech Republic @martin_hotell medium.com/@martin_hotell github.com/hotell
  2. Web Components Pros & Cons ✅ Encapsulation ✅ Composition ✅

    Themability ✅ Plug and Play ✅ ZERO runtime ✅ Interop with frameworks ❌ Global namespace ❌ Progressive enhancement ❌ A11Y ❌ DX (Developer experience) ❌ SVG ❌ Forms ❌ server side rendering ❌ ...other issues PROS CONS
  3. Web Components + library = zero runtime ? <html> lit-element

    v1 lit-element v2 haunted v2 haunted v1 x-tag v1 x-tag v2 6 Web Components = libraries 37.4 kB + Implementation
  4. SVG

  5. SVG You can't use Web Components to encapsulate parts of

    an SVG. Whole twitter thread WHY? SVG has a separate namespace - so everything outside the namespace is ignored.
  6. Forms - Broken standard <form> submit - Broken form autofill

    - Broken a11y (aria-labelledby) - shadow trees introduce boundaries for ID's Read the full proposal document
  7. Server Side rendering - You'll need to build your own

    pipeline - Puppeteer - @skate/ssr More info
  8. State of Components without Web Components ✅ Encapsulation ✅ Themability

    ✅ Declarative component model ✅ Great DX ✅ SVG ✅ Server Side rendering ✅ Interop * ✅ Small/ZERO runtime Preact Svelte
  9. When should we use Web Components ✅ Design system (if

    you need to support teams with various stacks) ✅ Plugins (Wordpress, Server Rendered pages) ✅ Micro Frontends ✅ Migration Purposes (AngularJS to Angular)
  10. How should we author Web Components 1. Use your framework

    ✅ 2. Consider Stencil ✅ 3. Use raw WC if you have the skill 1001001 compile 1001001 compile