Slots, Slots, Slots, Everybody!
summary
Live demos show Web Components, Vue and Angular slot behavior: a component proves content passed outside a template uses the host stylesheet while template content only sees its own CSS, and specificity can override an imported stylesheet; React has no slots. Built a dynamic list component that takes an array and v-for’s items into a named item slot, created scoped slots with shot count exposing number/message and an increment function, and exercised Angular’s ngTemplateOutlet conditional projection plus shadow DOM encapsulation — all examples run in the repos and slides.
AI-written summary · about
chapters (17)
- 0:00Slots in web components
- 1:06Slot placement and template tags
- 2:10CSS scoping in slots
- 2:53Slots in React vs Vue vs Angular
- 3:37Default slots in Vue
- 4:41Named slots in Vue
- 5:46Default and named slots in Vue
- 6:07Conditional slots in Vue
- 7:10Scoped slots in Vue
- 8:34Dynamic list components with slots
- 9:58Renderless components with slots
- 11:22Content projection in Angular
- 12:03Named slots in Angular
- 12:45Slot selection with CSS
- 13:50Conditional content projection
- 15:37CSS and shadow DOM in Angular
- 18:25Summary and resources
related talks
25mWeb components with Angular: The what, the why and the how.
35mFrameworks and webcomponents
43mDiversity in the World of Web Components
01h 18mA Deep Look At Angular Elements
34mWeb Components & Micro Apps: Angular, React & Vue peacefully united?
21mCreating Container Components with Web Components and Angular
46mWhat ever happened with Web Components?
36mAngular, React, Vue and co: Harmoniously united by web components and micro apps?