Description

This is more common with Light DOM components but is something that can happen with Shadow DOM components depending on how you try to access the host's CSSStyleDeclaration.

I noticed that when using Shadow DOM components, I could do things like add custom CSS properties to the host by doing something like:

const hostStyle = this.template.host.style;
hostStyle.setProperty('--myProperty', 'red');

It seemed natural to be able to do something similar for Light DOM components like:

this.style.setProperty('--myProperty', 'red');

However I found that this.style is always undefined in the Light DOM component. This is also preventing me from being able to get the value of a custom CSS property:

this.style.getPropertyValue('--myProperty');

Steps to Reproduce

This playground helps reproduce the issue:
https://stackblitz.com/edit/salesforce-lwc-ndqrwq?file=src%2Fmodules%2Fx%2Fapp%2Fapp.html

It also includes a suggested workaround which is to get to the host element via refs or children:

const hostStyle = this.children[0].parentElement.style;

This will only work after renderedCallback.

Expected Results

We should be able to access the host's CSSStyleDeclaration via this.style.

Actual Results

The value of this.style is always undefined.

Browsers Affected

All

Version

• LWC: 3.6.0, 6.1.1 (present in both versions)

Possible Solution

Additional context/Screenshots