Gostaria de saber se existe a possibilidade de usar um `custom-attribute` do tipo `data-*=" "` como valor para um estilo CSS ou mesmo usar esse *custom* *data* como valor para uma variável no CSS.

Para exemplificar melhor vou explicar minha ideia. Eu gostaria de colocar no elemento tipo `<div data-opacity="0.5" ></div>` e essa `div` ficar com 0.5 de opacidade. Logo eu preciso que de alguma forma o CSS reconheça esse valor de 0.5 do `data-opacity` como o valor do `opacity:` na classe

Eu tentei usar o `attr` direto como valor do estilo `opacity: attr(data-opacity)` e também tentei declarar como variável, porém tb não deu certo `--data-opacity: attr(data-opacity)`

*Esse é só um exemplo de uso, mas poderia ser para cor, margens, etc* Gostaria de saber se existe alguma forma de usar esse `custom-attribute` como valor dentro do CSS?

Segue um exemplo do que eu gostaria de fazer, porém não funciona como está.


<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

    :root {
        --data-opacity: attr(data-opacity);
        --cor: #fff;
    }

    [data-opacity] {
        color: var(--cor);
        opacity: var(--data-opacity); /* não funciona */
        /* opacity: attr(data-opacity); */ /* também não funciona */
    }
    .box {
        width: 100px;
        height: 100px;
        background-color: #f00;
    }

        


<!-- language: lang-html -->

    <div class="box" data-opacity="0.5">cor branca mas sem opacidade</div>

<!-- end snippet -->