Exploring how to override local CSS custom properties inside a web component's shadow DOM from a global stylesheet, since :host has higher specificity than :root and normal token overrides silently fail. The fix uses the :defined pseudo-class, which triggers once a custom element is registered and is more specific than :host, letting themed tokens pierce the shadow boundary without resorting to !important or element selectors. Covers a quirk where undefined nested custom elements inherit tokens unintentionally, mentions the upcoming inherit() CSS function as a future fix, and closes with a rundown of alternative approaches (important overrides, shipping all variables, fallback chains, private variables) and their trade-offs.
Table of contents
The local component variable problemA refined solution in :definedFull walkthru demoOne small quirk :not(:defined) elementsAlternatives consideredQuestions this post answers
Why can't I override a CSS custom property set inside a web component's shadow DOM from my global :root stylesheet?
Because :host has higher CSS specificity than :root, so a custom element's own :host block wins even if the global stylesheet redeclares the same variable later. Directly targeting the element tag (e.g. ui-card { --card-font: fantasy; }) works but couples CSS to the DOM and increases specificity, making future overrides harder without !important. Anyone theming web components with daily.dev bookmarks can revisit this specificity fix when custom properties won't override.
How can I override web component shadow DOM CSS variables without using !important or element selectors?
Use the :defined pseudo-class in the global stylesheet, since it applies once customElements.define() registers the element and has higher specificity than :host, letting the override pierce the shadow boundary. Because :defined also matches native elements like div and video, the same tokens can be reused on light DOM classes for portability. Developers weighing CSS specificity tricks for design systems can save approaches like this on daily.dev.
What is the CSS inherit() function used for with custom properties?
The inherit() function is a proposed CSS feature that lets a custom property explicitly inherit its value from an ancestor while providing a fallback, for example --card-bg: inherit(--card-bg, var(--system-bg)). It is intended to solve cases like undefined custom elements unexpectedly inheriting variables from a :defined parent, though the exact specification behavior is still being worked out. Track emerging CSS features like inherit() on daily.dev before they land in browsers you ship for.