--- title: Shadow-piercing local component variables | daily.dev description: 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... canonical: https://daily.dev/posts/shadow-piercing-local-component-variables-dymj4l3sd twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Shadow-piercing local component variables | daily.dev og:description: 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... og:url: https://daily.dev/posts/shadow-piercing-local-component-variables-dymj4l3sd og:image: https://api.daily.dev/og/posts/DyMJ4l3sd.png og:image:alt: Shadow-piercing local component variables og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Shadow-piercing local component variables **[Dave Rupert](https://daily.dev/sources/daverupert)** · 7 min read · 0 upvotes · 0 comments ## Summary 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. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### why can't I override a web component's local CSS variable from my global :root theme stylesheet Because :host inside a shadow root has higher specificity than :root, so a variable declared on :host always wins over one declared on :root, even if the :root declaration comes later. Directly targeting the element selector (e.g. ui-card { --card-font: fantasy; }) works but couples CSS to the DOM and pushes you toward !important later. _Developers wrestling with shadow DOM specificity conflicts can find approaches like this through daily.dev._ ### how does the CSS :defined pseudo-class help with theming web components The :defined pseudo-class matches any element, custom or native, once it has been registered (for custom elements, this happens after customElements.define() runs), and it has higher specificity than :host. Setting theme tokens under a :defined selector lets those variables pierce the shadow boundary and override component-level defaults, while remaining reusable on native elements and Light DOM classes too. _Anyone building a component theming system can track CSS specificity tricks like this via daily.dev._ ### what is the CSS inherit() function and how would it fix shadow DOM variable inheritance The inherit() function is a proposed CSS feature that lets a shadow-root host explicitly inherit a custom property from outside the shadow boundary with a fallback, for example --card-bg: inherit(--card-bg, var(--system-bg)). It's suggested as a cleaner future fix for edge cases where undefined custom elements incorrectly inherit variables from a :defined parent. _Developers watching for new CSS inheritance features can keep tabs on proposals like inherit() through daily.dev._ ## Similar posts on daily.dev - [Design Tokens, Web Components, and CSS @layer](https://daily.dev/posts/design-tokens-web-components-and-css-layer-gknyqzubd) · Always Twisted · 5 upvotes · 0 comments - [Controlling when CSS custom properties are computed](https://daily.dev/posts/controlling-when-css-custom-properties-are-computed-2lphvvmeh) · Jake Archibald · 26 upvotes · 3 comments - [On Inheriting and Sharing Property Values](https://daily.dev/posts/on-inheriting-and-sharing-property-values-lcrr4k6sr) · CSS-Tricks · 1 upvotes · 0 comments - [The Scope of CSS @function – Master.dev Blog](https://daily.dev/posts/the-scope-of-css-function-master-dev-blog-zq0o9lpmr) · Frontend Masters · 6 upvotes · 1 comments - [Using CSS vars to style SVG symbols](https://daily.dev/posts/using-css-vars-to-style-svg-symbols-yqxm01fdx) · Pascal’s scribbles · 3 upvotes · 0 comments --- Tags: [#css](https://daily.dev/tags/css), [#html](https://daily.dev/tags/html), [#design-systems](https://daily.dev/tags/design-systems), [#web-components](https://daily.dev/tags/web-components) [View this post on daily.dev](https://daily.dev/posts/shadow-piercing-local-component-variables-dymj4l3sd) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Shadow-piercing local component variables","url":"https://daily.dev/posts/shadow-piercing-local-component-variables-dymj4l3sd","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/shadow-piercing-local-component-variables-dymj4l3sd"},"datePublished":"2026-08-17T15:16:12.500Z","dateModified":"2026-09-14T07:30:37.134Z","description":"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...","image":"https://media.daily.dev/image/upload/s--P4t4XyoV--/f_auto/v1722860399/public/Placeholder%2001","thumbnailUrl":"https://media.daily.dev/image/upload/s--P4t4XyoV--/f_auto/v1722860399/public/Placeholder%2001","isAccessibleForFree":true,"articleSection":"Dave Rupert","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Dave Rupert","logo":"https://media.daily.dev/image/upload/s--Ewp37ILO--/f_auto,q_auto/v1777801532/logos/daverupert","url":"https://daily.dev/sources/daverupert"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/shadow-piercing-local-component-variables-dymj4l3sd","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":0},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"css,html,design-systems,web-components","timeRequired":"PT7M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Dave Rupert","item":"https://daily.dev/sources/daverupert"},{"@type":"ListItem","position":3,"name":"Shadow-piercing local component variables"}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/shadow-piercing-local-component-variables-dymj4l3sd#faq","mainEntity":[{"@type":"Question","name":"why can't I override a web component's local CSS variable from my global :root theme stylesheet","acceptedAnswer":{"@type":"Answer","text":"Because :host inside a shadow root has higher specificity than :root, so a variable declared on :host always wins over one declared on :root, even if the :root declaration comes later. Directly targeting the element selector (e.g. ui-card { --card-font: fantasy; }) works but couples CSS to the DOM and pushes you toward !important later. Developers wrestling with shadow DOM specificity conflicts can find approaches like this through daily.dev."}},{"@type":"Question","name":"how does the CSS :defined pseudo-class help with theming web components","acceptedAnswer":{"@type":"Answer","text":"The :defined pseudo-class matches any element, custom or native, once it has been registered (for custom elements, this happens after customElements.define() runs), and it has higher specificity than :host. Setting theme tokens under a :defined selector lets those variables pierce the shadow boundary and override component-level defaults, while remaining reusable on native elements and Light DOM classes too. Anyone building a component theming system can track CSS specificity tricks like this via daily.dev."}},{"@type":"Question","name":"what is the CSS inherit() function and how would it fix shadow DOM variable inheritance","acceptedAnswer":{"@type":"Answer","text":"The inherit() function is a proposed CSS feature that lets a shadow-root host explicitly inherit a custom property from outside the shadow boundary with a fallback, for example --card-bg: inherit(--card-bg, var(--system-bg)). It's suggested as a cleaner future fix for edge cases where undefined custom elements incorrectly inherit variables from a :defined parent. Developers watching for new CSS inheritance features can keep tabs on proposals like inherit() through daily.dev."}}]} ```