#5372 No value returned by getComputedStyle in the firstUpdate hook on Chromium 151 and later

Which package(s) are affected?

Lit Core (lit / lit-html / lit-element / reactive-element)

Description

There are 2 custom elements: my-element and my-wrapper structured in <body> as shown below:

<my-wrapper>
  <my-element></my-element>
</my-wrapper>

my-element needs to use its CSS value to do something after it's has been rendered so it does the following in firstUpdated hook:

// within my-element class
firstUpdated(changeProperties) {
    super.firstUpdated(changeProperties);
    const result = getComputedStyle(this).getPropertyValue("--my-var");
    ... // do something with the result
  }

This used to work fine up to Chromium 150: the css value returned correctly. However, on Chromium 151, the return value is now an empty string.

Expected result: CSS value returns correctly, aligning with behavior of Chromium 150 and below. Actual result: CSS value returns as an empty string, the new behavior of Chromium 151.

Note that Safari 26.6 still has the old behavior while Firefox 153 behaves in the same way of Chromium 151.

Is this behavior change expected/aligned with any standard? I was unable to find any references about this change or announcements from Chromium team either.

Reproduction

Here's a lit playground reproducing the issue along with the test result which is also included in the playground.

Chromium 151 and above: empty string Chromium 150 and below: 'bar' Safari 26.6: "bar" Firefox 153: empty string

Workaround

Wrapping getComputedStyle() in setTimeout() or requestAnimationFrame() is a known workaround.

Is this a regression?

Yes. This used to work, but now it doesn't.

Affected versions

Failing in Chromium 151, worked in Chromium 150

Browser/OS/Node environment

lit: 2.8.0 and 3 bundled in the playground. Browser: Chrome 151.0.7922.138 & Edge 151.0.4129.78 OS: macOS 26.6