Work · XP Inc.
Chameleon: CSS-in-JS for web components
A theming engine for Stencil and web components, about 8x faster than styled-components in our internal runtime-theming benchmarks.
- Role
- Software Architect and Design Ops Tech Lead
- When
- 2020 – 2022
- Stack
- Stencil · Web components · Shadow DOM · Constructable Stylesheets
Why
Web components keep their styles inside the Shadow DOM, which is great for isolation and hard for theming. Popular CSS-in-JS libraries were built for React and the regular DOM. We needed theming that worked inside shadow roots, at runtime, without paying for it on every render.
How it works
- A theme provider publishes theme changes over pub/sub to every component that subscribed.
- Styles are generated as Shadow CSS and attached inside each component’s Shadow DOM.
- Generated styles are cached in a hash table keyed by component and attributes, so the same combination is never computed twice.
- Constructable Stylesheets let many shadow roots share one stylesheet, with a fallback for browsers without support.
How fast
About 8x faster than styled-components in our internal runtime-theming benchmarks. The design goal behind it: never recompute a style that is already in the cache, and share stylesheets instead of injecting copies.