Shadow-piercing local component variables

Stuart Robson’s post Solving CSS @layer Ordering in Design Systems with Design Token Metadata, a response to Chris Coyier’s Thinking Horizontally in CSS @layer, came to me at a serendipitous time. You know I love a good blog-and-response, but these posts on the topic of lowering the specificity of component-level tokens and scaling that out was a problem I was having with some of my web components. Their @layer trick didn’t work for me, but here’s what did… The local component variable problem Let’s say we have a global stylesheet with our design system tokens. /* theme.css */ :root { --system-bg: #00f1; --system-fg: #000; --system-font: Inter; sans-serif; } And then we set up our web component with some local component variables that use design system tokens as defaults. <ui-card> <template shadowrootmode="open"> <style> :host { /* Local component variables */ --card-bg: var(--system-bg); --card-fg: var(--system-fg); --card-font: var(--system-font); /* Apply component styles */…