Scaling Components Across Multiple Frameworks
summary
Claims that a single codebase of Stencil compiler components compiles to custom elements plus generated framework bindings for React Angular and Vue and that this lets Ionic maintain 100+ components without rewriting per framework. Shows the build-time approach, low runtime, TypeScript AST transforms that optimize output, auto-generated docs and prerender targets, and how shadow DOM and attribute/property mapping are handled so framework consumers import and use native-looking components.
AI-written summary · about
chapters (17)
- 0:00Start
- 1:23Software Projects
- 1:59Organizational Design Systems
- 2:43Framework-Level Design Systems
- 3:08Framework Forks of Common CSS Libraries
- 3:39Enter The Stencil Compiler
- 4:32Document Object Model (DOM)
- 5:43Extending the DOM with Custom Elements
- 6:21Stencil Runtime
- 6:50The DOM's Component Model
- 8:37Framework output targets
- 11:31ionic/angular
- 12:08Styling
- 12:27Shadow DOM
- 14:00Static analysis
- 14:23TypeScript Custom Transformers
- 15:16Closing Thoughts
related talks
10mStencil: the Time for Vanilla Web Components Arrived
29mStencil: a built-time approach to the web
20mMake Web Components Great Again with StencilJS
33mWeb Components with StencilJS
22mInclusive development through web components
27mUsing Web Components in Ionic
01h 05mStencil for Cross-Framework Components
16mArchitecting A Component Compiler