Design at scale with Web Components (and ducks)
summary
A concrete recipe for shipping a design system: build a reusable quack-input Web Component with lit-element, Shadow DOM, slots and a React/Vue/Angular wrapper; add ElementInternals formAssociated + AOM to make it submit and expose aria-labelledby; implement design tokens with CSS Custom Properties, switchable dark mode via prefers-color-scheme, and register tokens with Registered Properties to validate values and improve performance and bundle size. Examples and code for multiple frameworks are published and shown working in Chrome/Edge (AOM partly in Safari).
AI-written summary · about
chapters (17)
- 0:00Intro
- 0:48Material Design, a History
- 1:28Material Design, a Problem
- 1:45Web Components FTW
- 4:49Shadow DOM
- 6:36static get properties()
- 7:41render() return html
- 11:03Lion Web Components by ING
- 11:50class MyElement extends HTMLElement constructor()
- 12:57static get formAssociated() { return true; }
- 17:51CSS Custom Properties
- 20:30Emedia (prefers-color-scheme: dark)
- 22:00Component selector comment-input', template
- 22:52Spectrum Web Components by Adobe
- 23:23Problems, problems
- 25:03Bread Design global styles
- 25:15@property ---amber700 syntax: ''; inherits: false
related talks
56mChasing the holy grail Reusable Web Components and Design Tokens
39mDesigning with Components
58mChasing the holy grail: reusable web components and design tokens
35mDesign system - From a Developer Point-of-View
21mDesign Systems 101: The Developer Approach to Better Frontends
29mBreak out from the framework: Web Components to the rescue
27mAdvanced Design System Considerations
20mDesign Systems for the Rest of Us