“Designing Standard Systems”
summary
Salesforce moves its Lightning Design System from global CSS toward web components using custom elements, Shadow DOM and slots, keeping HTML/CSS blueprints and letting engineers supply JS; the team splits tokens into primitive tokens (non‑customizable brand values in Theo) and component tokens for controlled theming, exposes styling via CSS custom properties with closed and open assignments, and uses constructable stylesheets (adoptedStyleSheets array) to share CSS across shadow roots for performance; Shadow DOM stays off until Accessibility Object Model work completes.
AI-written summary · about
chapters (11)
- 0:00Introduction
- 0:29Ecosystem and evolution
- 2:26Web standards and challenges
- 7:54Understanding custom elements
- 13:29Shadow DOM in practice
- 17:32Slots and composition
- 20:56Design tokens and semantics
- 28:52CSS custom property scopes
- 36:52Placeholders and assignments
- 45:45Constructible style sheets
- 50:53Future standards and closing
related talks
41mDesigning a Design System
06mLightning talk: Design System - Modular component model
56mChasing the holy grail Reusable Web Components and Design Tokens
39mStyling a design system based on Bootstrap 4 and Web Components
22m'Centralizing the Frontend with Design Systems and Web Components'
47mEnvisioning a Design System Maintained by the Drupal Community
22mDesign Systems, when and how much? — Diana Mounter
29mDesign at scale with Web Components (and ducks)