Envisioning a Design System Maintained by the Drupal Community
summary
A library called Generic Drupal Web Components provides framework‑agnostic custom elements (custom elements + shadow DOM + HTML templates) and uses lit, Storybook and CSS variables from Open Props to let the same card and menu render in Twig, Vue or plain HTML. A menu component proves the model: it fetches menus by base URL and menu ID and supports theme and unstyled modes. Per‑component API calls don’t scale, so a Drupal State client adds caching and denormalization to avoid repeated Json:API requests. Declarative Shadow DOM enables server‑rendered markup, though many SSR toolchains rely on Node.
AI-written summary · about
chapters (12)
- 0:00Introduction and speaker
- 1:47What if Drupal-friendly components
- 6:04Web components benefits and challenges
- 11:03Drupal menu web component demo
- 13:51Styling web components options
- 20:18CSS custom properties and Open Props
- 26:18Drupal data integration in components
- 31:59Drupal State library for API caching
- 35:08Data-driven web components in Drupal
- 38:00Sustainability and community involvement
- 39:22Server-side rendering with web components
- 41:50Q&A session
related talks
56mChasing the holy grail Reusable Web Components and Design Tokens
22m'Centralizing the Frontend with Design Systems and Web Components'
36mThe State of Web Components
42mComponents everywhere! - Bridging the gap between backend and frontend
45mLet's Talk About Web Components
29mDesign at scale with Web Components (and ducks)
01h 00mBuild It Better, Stupid: Using Design Systems for Scalability
21mShared Components Beyond the Design System