How to set a dynamic property name in var()

Question

I am trying to use custom properties based on dynamic values, such as attr().

For instance, in below code, I tried to access both custom-properties based on the current element's id attribute.

:root{
  --app-foo: 'Hello';
  --app-bar: 'World';
  }
div::after{
/* expected :
            'Hello' for #foo
            'World' for #bar    */
  content:  var('--app-'attr(id));
  }

<div id="foo"></div>
<div id="bar"></div>

But it obviously fails.

Is there some way to achieve this?

Answer 1

The grammar does not permit the first argument of a var() expression to be anything but a single custom property name that is hardcoded. This means that you cannot choose which custom property to reference in a var() expression using CSS, since it doesn't accept a string (or an attr() expression returning a string) for a property name. You'll need to set the value containing the var() expression using JS.