Native Web Components - All Frameworks Invited
summary
Shows concrete code: builds two small native components (a name/age form and a progress bar) and reuses the exact same custom elements inside Angular, AngularJS, React (with a tiny wrapper), Vue and Ember but Backbone fails to integrate. Demonstrates a circular percentage element made from a single DOM node with CSS quadrants (no SVG/canvas) and an addEventListener pattern that returns a remover. Notes shadow DOM polyfills are poor, recommends ES6 imports with requirejs fallback and avoiding Polymer for portability.
AI-written summary · about
chapters (9)
- 0:00Introduction and background
- 5:47What are native web components
- 7:15Building a simple web component
- 11:15Using components in Angular
- 16:57React and Vue integration
- 21:02Angular 2+ and Ember
- 23:58Circular progress component demo
- 27:20Best practices and recommendations
- 29:34Q&A on CSS and Shadow DOM
related talks
36mThe Road to Native Web Components
32mLet's talk about Web Components
36mBuilding framework agnostic UI with Web Components
19mWeb Components
37mThe world of Web Components
40mThe Web Components interoperability challenge
43mFrameworks and the Future of the Web Platform
43mDiversity in the World of Web Components