Building framework agnostic UI with Web Components
summary
Shows how to build reusable, framework‑agnostic UI by shipping real Web Components (example: a scoped notification component rendered via templates, Shadow DOM, custom elements, modules) and running them inside React, Vue or Angular (Angular needs the custom elements schema). Demonstrates using IE11 polyfills for older browsers, explains lifecycle hooks (constructor, connected/disconnectedCallback, attributeChangedCallback) and positions components as micro‑frontend building blocks with a working demo and practical integration steps.
AI-written summary · about
chapters (26)
- 0:00Start
- 0:08Building framework agnostic UI with Web Components
- 4:37Many different ways to keep UI similar
- 5:13Challenges with existing tools
- 5:40UI development challenges
- 6:50Design consistency
- 8:19What does agnostic mean?
- 9:35Code reusability
- 12:01UI element as HTML tag
- 14:13Scoping
- 14:54Creating reusable Web Components
- 15:41Web Component lifecycle
- 16:03constructor()
- 20:06Custom Elements + React
- 21:01Custom Elements + VueJS
- 21:23Custom Elements + Angular
- 23:22Use polyfills
- 25:20Micro Frontends architecture
- 28:15Feature ownership
- 28:59Micro Frontends pros
- 29:35Self-contained code
- 30:18Autonomous teams
- 30:44Micro Frontends cons
- 31:21Payload size
- 33:35Takeaways
- 33:50Think about UI consistency
related talks
44mMake UI Components for the Web Framework Ecosystem
43mFrameworks and the Future of the Web Platform
29mBreak out from the framework: Web Components to the rescue
37mThe world of Web Components
34mWeb Components & Micro Apps: Angular, React & Vue peacefully united?- 34mWeb Components & Micro Apps: Angular, React & Vue peacefully united?
40mAngular, React, Vue and Co. – peacefully united thanks to Web Components and Micro Apps
41mComponents Approach to Building Web Apps