Break out from the framework: Web Components to the rescue
summary
Argues that Web Components break framework lock‑in by running inside React, Angular, jQuery or plain pages and cites 20% of Chrome sites use custom elements as a surprising adoption signal; explains how to build them: class extends HTMLElement, dash‑name, Shadow DOM + slots for isolation, CSS custom properties and Shadow Parts for theming, and the attachInternals and formAssociated API to restore form and accessibility behavior when inputs are wrapped; warns Safari blocks customized built‑ins; mentions declarative shadow DOM, scoped custom element registry, and Lit v3 as practical tools.
AI-written summary · about
chapters (18)
- 0:00Introduction
- 1:14Framework dependency struggles
- 4:47Web Components history
- 7:41Current adoption and use cases
- 10:54Web Components goals
- 12:00Defining custom elements
- 13:47Custom element lifecycle
- 14:30Shadow DOM basics
- 16:41Slot and transclusion
- 17:25CSS encapsulation benefits
- 20:42Styling components externally
- 21:46Inherited properties in Shadow DOM
- 23:13Open discussion on styling
- 23:34Accessibility and form interaction
- 24:59Element internals explained
- 26:44Server-side rendering with web components
- 27:26Scoped custom element registry
- 28:12Conclusion and resources
related talks
37mThe world of Web Components
42mThe Good, The Bad, The Web Components
32mLet's talk about Web Components
36mThe State of Web Components
36mBuilding framework agnostic UI with Web Components
45mLet's Talk About Web Components
36mWeb components - A whirlwind tour thru the future of the web
24mThe Good, The Bad, and The Web Components