ShopTalk 700: Popover Web Component, Bugs in Blocks, and Where’s Vue?
Feb 2, 2026
They banter about 3D printing and dive into whether CSS should live inside web components. A demo shows a popover component that auto-generates IDs and anchors. Accessibility and semantics for menus get a thorough debate. Vue’s niche is explored, including Petite Vue and Nuxt. They hunt tricky bugs in legacy CodePen blocks and weigh persistence and documentation tradeoffs.
AI Snips
Chapters
Transcript
Episode notes
Shadow DOM Shapes Styling Decisions
- Shadow DOM forces you to include component styles, while Light DOM benefits from global CSS approaches.
- Use Shadow DOM when you want encapsulation; use Light DOM if you expect consumer styling and cascading.
Weigh Bundling Versus Network Requests
- Consider performance tradeoffs: bundling CSS into JS increases JS bytes but can reduce requests and make components self-contained.
- Evaluate requests vs duplicated bytes and experiment with imports or adopted sheets for optimal caching.
Building A Popover Web Component
- Chris built a practical popover/menu web component to avoid remembering anchor IDs and attributes.
- He chose Lit, disabled Shadow DOM for light DOM interactions, and autogenerated unique IDs and anchors.