Как установить динамическое имя свойства в var()

Question

Я пытаюсь использовать пользовательские свойства, основанные на динамических значениях, таких как attr(),

Например, в приведенном ниже коде я попытался получить доступ к обоим пользовательским свойствам на основе текущего элемента. id приписывать.

: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>

Но это явно не удается.

Есть ли способ добиться этого?

Answer 1

Грамматика не допускает первый аргумент var() Выражение должно быть чем угодно, кроме одного имени настраиваемого свойства, которое жестко закодировано Это означает, что вы не можете выбрать, какое пользовательское свойство ссылаться на var() выражение с использованием CSS, так как он не принимает строку (или attr() выражение, возвращающее строку) для имени свойства. Вам нужно будет установить значение, содержащее var() Выражение с использованием JS.