Future-proof your UI: Building with Web Components

on YouTube ↗18m

" summary

SuperTokens builds a prebuilt auth UI as Web Components by compiling JSX with SolidJS → Web Components and shipping a prototype that talks to a live SuperTokens server. The team avoids no shadow DOM (password managers), polyfills slots, and accepts props-as-attributes limited to strings and booleans (serialize for complex objects). Components expose internal state via element properties and emit custom events, and the prototype runs inside React Router, static pages and PWAs, so the approach works end to end.

AI-written summary · about

" chapters (9)

1. 0:00Introduction to web components
2. 2:26Problem with pre-built UI
3. 3:09Web components basics and APIs
4. 6:17Using Solid with web components
5. 8:01Handling props and slots
6. 11:13Adding interactivity and state
7. 15:05Using in React
8. 16:50Live demo and prototype
9. 17:10When to use web components

" related talks

• 58mChasing the holy grail: reusable web components and design tokensDuncan Hunter · NDC Oslo 2023
• 56mChasing the holy grail Reusable Web Components and Design TokensDuncan Hunter · NDC Melbourne 2022
• 37mWeb Components for Authentication: The what, the why and the howAna Cidre · angularday 2020
• 36mThe State of Web ComponentsAna Cidre · CityJS Conference 2020
• 35mWeb Components - The Lego Bricks of Web DevelopersAaron Czichon · DevDays Europe 2019
• 44mWeb Components An Introduction to the FutureTobias Ljungstrom · NDC Oslo 2021
• 36mBuilding framework agnostic UI with Web ComponentsPiotr Nalepa · 4Developers Katowice 2019
• 20mAvoiding vendor lock-in through Web ComponentsMatias Huhta · React Finland 2022