The Web Components interoperability challenge
summary
Shows a single counter component implemented with vanilla Custom Elements, Polymer, Stencil and SkateJS, plus two lightweight variants, then assembles all six into one page where each implementation emits events and updates others. Demonstrates that attributes/properties and DOM events are enough for cross-library communication, that Stencil compiles to tiny standards-compliant elements (with SSR option), and that the mixed components actually interoperate seamlessly in the demo.
AI-written summary · about
chapters (17)
- 0:00Intro
- 0:14Horacio Gonzalez
- 2:13Polymer tour 2014-2018
- 2:50Web components - Revolution
- 3:05Variations of the same questions
- 4:23A very basic web component
- 9:25Custom Elements don't
- 11:53Lifecycle callbacks
- 12:19Ty-counter custom element
- 19:02Interoperation pattern
- 21:37Lots of web components libraries
- 23:58Slim.js
- 28:58Skates
- 31:18Next generation Ionic
- 35:00And the cherry on the cake
- 35:34Hands on Stencil
- 37:45Using the standard pattern
