Web Components with StencilJS
summary
Custom elements deliver no framework runtime and native change detection, claiming much faster renders because each component has an isolated Shadow DOM; browser support is about 99% browser support (IE excluded). StencilJS is used to build a component library, generate Angular/React wrappers, documentation and tests. The team ships a core web-component package plus framework-specific npm packages; it works, but Shadow DOM blocks some form/input events so some components drop shadowing for Angular form compatibility.
AI-written summary · about
chapters (13)
- 0:00Introduction
- 1:07Agenda and custom elements
- 2:51Benefits of custom elements
- 4:02When to use custom elements
- 7:14Native HTML in custom elements
- 9:19Shadow DOM and encapsulation
- 13:58Light vs Shadow DOM
- 17:30Lifecycle and challenges
- 21:40StencilJS for custom elements
- 25:11Demo setup and framework integration
- 26:15Future-proof custom elements
- 27:58Organizational benefits
- 30:29Design systems and APIs
related talks
20mMake Web Components Great Again with StencilJS
10mStencil: the Time for Vanilla Web Components Arrived
35mWeb Components - The Lego Bricks of Web Developers
44mWeb Components An Introduction to the Future
52mWeb Components Can Do That?
16mScaling Components Across Multiple Frameworks
27mUsing Web Components in Ionic
01h 05mStencil for Cross-Framework Components