Web Components An Introduction to the Future
summary
Web Components are production ready and built with native browser APIs: HTML templates, Custom Elements and Shadow DOM. The demo constructs a reusable custom checkbox using a template clone, an open shadow root, slots, attribute/property getters and setters to reflect changes, CSS custom properties for theming, and dispatching custom events to send state out — the component works as expected. Registration script runs once; integration is direct in most frameworks (React needs a thin wrapper). Libraries like Lit and Stencil streamline the boilerplate.
AI-written summary · about
chapters (18)
- 0:00Intro
- 0:46My name is Tobias
- 2:40Web tech upgrades constantly
- 4:04Native browser features replaced jQuery
- 4:53JavaScript Frameworks
- 6:46Framework problems
- 12:31Custom elements
- 17:45Let's code a web component!
- 19:38Use a template
- 20:39Enter the shadow DOM
- 25:06Using attributes and properties
- 29:13Piercing the shadow boundary
- 35:01Using web components
- 35:17The components and the frameworks
- 36:11Web component frameworks
- 39:09What does the future hold?
- 41:01Use cases for web components
- 41:56Will web components replace JS frameworks?
related talks
36mThe State of Web Components
45mLet's Talk About Web Components
32mLet's talk about Web Components
39mWeb components - A whirlwind tour
46mWhat ever happened with Web Components?
29mWhen to Use Web Components
51mBuilding web applications with Web Components
35mWeb Components - The Lego Bricks of Web Developers