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()式の最初の引数が、ハードコードされた1つのカスタムプロパティ名以外のものであることを許可しません。これは、CSSを使用してvar()式で参照するカスタムプロパティを選択できないことを意味します。プロパティ名に対して文字列（または文字列を返す式attr()）を受け入れないためです。 JSを使用してvar()式を含む値を設定する必要があります。