👀 Views: 37 💬 Answers: 1 📅 Created: 2025-06-16

css lit-element shadow-dom custom-properties JavaScript

I'm maintaining legacy code that I'm working on a project and hit a roadblock... I'm trying to use CSS custom properties in a LitElement component, but I'm running into an scenario where the styles do not inherit correctly within the Shadow DOM. I have a parent component that defines a custom property like this: ```css :host { --main-color: blue; } ``` In my child LitElement component, I'm trying to use that property in my styles like this: ```css :host { display: block; background-color: var(--main-color); } ``` However, the background color is not being applied as expected. When I inspect the child component, it shows that the `background-color` is set to `transparent`, and I don't see any errors in the console. I also tried using `::part` to expose the styles, but that didn't seem to make a difference. Here's how I attempted to use it: ```css :host::part(my-child) { background-color: var(--main-color); } ``` I've confirmed that the parent component is being rendered and that the custom property is set properly. I even added a `console.log(getComputedStyle(this).getPropertyValue('--main-color'))` in the child component's `firstUpdated()` lifecycle method, and it returns the correct value `blue`. Is there a specific way to ensure that CSS custom properties are inherited correctly in Shadow DOM, or do I need to adjust my approach? I’m using LitElement version 2.0.0 and testing in Chrome 92. For context: I'm using Javascript on macOS. Any help would be greatly appreciated!