Values of background shorthand property wrongly expanded when trying to call HTMLElement.style

Question

In styles for an element I have a few inline CSS declarations including a shorthand declaration for background

<style>
  :root{
    --bg-white: rgba(255, 255, 255, 0);
  }
</style>

<div style="background: var(--bg-white); ... "></div>

but when iterating over HTMLElement.style the shorthand property looks like it's wrongly expanded

 for (const declaration of Array.from(target.style)) { 
   const value = target.style.getPropertyValue(declaration)

   console.log(`${declaration}: ${value}`)
 }

This should print out background-color: var(--bg-white) per HTMLElement.style documentation on MDN, but I get background-color: ''

Shorthand properties are expanded. If you set style="border-top: 1px solid black", the longhand properties (border-top-color, border-top-style, and border-top-width) are set instead.

Has anyone encountered this before?

Answer 1

This should print out background-color: var(--bg-white) per HTMLElement.style documentation on MDN, but I get background-color: ''

If you use HTMLElement.style, it will return what is directly applied (not computed) through the styleattribute.

In that case the browser can't know what the var(...) in background: var(--bg-white); will resolve and to which background-... properties it will contain (The contents of the variable will be placed where the var(...) statement is and then the resulting value will be parsed.

So if you e.g. have --bg-white: content-box radial-gradient(crimson, skyblue); then your --bg-white will actually influence multiple properties.