The (Real) State of Web Components
summary
Live coding builds a working WC-counter custom element with customElements.define, Shadow DOM, slots, CSS variables and getter/setter state, proving practical encapsulation and theming. Claim: only 6% of all pages use Web Components; browser support is broad except IE and iOS lack of customized built‑in elements. Problems shown: global registry collisions, form and SSR gaps, declarative shadow DOM proposal declined, and library payloads (lit-html/lean-element ~7KB, Haunted ~5KB, xTag ~6.5KB) can sum to ~40KB for six components. Recommends design systems, micro frontends, Stencil or raw Web Components.
AI-written summary · about
chapters (14)
- 0:00Start
- 1:16Disclaimer
- 2:07Meanwhile on the internet
- 2:58WebComponents everywhere?
- 15:20Web Components Pros & Cons
- 16:01Global namespace
- 16:42Progressive enhancement/Aly
- 20:08Web Components + library zero runtime?
- 21:29SVG
- 22:00Forms
- 22:29Server Side rendering
- 23:27State of Components without Web Components
- 24:36When should we use Web Components
- 25:26How should we author Web Components
related talks
24mThe Good, The Bad, and The Web Components
36mThe State of Web Components
42mThe Good, The Bad, The Web Components
32mLet's talk about Web Components
20mAvoiding vendor lock-in through Web Components
44mWeb Components An Introduction to the Future
45mLet's Talk About Web Components
39mWeb components - A whirlwind tour