Cross Framework Components using Custom Elements or Mitosis
summary
Explains when plain web components win (no runtime, vanilla web components 1.12× faster in benchmarks) versus when a generator helps; shows GitKraken using Lit Element across desktop, VS Code and web app and warns about Shadow DOM closed limits, registration/lazy-loading pain, and the obscure adoptedCallback. Demonstrates Mitosis as a compiler that outputs framework-specific code (methods become class members in Angular, top-level functions in React) and that it successfully ported Boring Avatars to 7 targets, summarizing Mitosis compiles to React Angular Vue Solid etc and works for presentational components.
AI-written summary · about
chapters (15)
- 0:00Introduction to talk
- 1:50About Git Kraken tools
- 3:42History of web components
- 9:21Building web components basics
- 12:51Lifecycle hooks in components
- 14:35Handling props and events
- 16:17Cross-framework web component support
- 18:02Git Kraken’s use of LitElement
- 19:48Introducing Mitosis library
- 22:37Mitosis component structure
- 25:24Control flow and children in Mitosis
- 26:48Context in Mitosis components
- 29:18Demo: Boring Avatars with Mitosis
- 33:08Generated code comparison
- 36:11Q&A session
related talks
37mThe world of Web Components
16mScaling Components Across Multiple Frameworks
29mBreak out from the framework: Web Components to the rescue
32mLet's talk about Web Components
29mWhen to Use Web Components
43mFrameworks and the Future of the Web Platform
46mScaling Micro-Frontends with Custom Elements
52mWeb Components Can Do That?