<div class="test" style="--bg:#f49c14"></div>
<div class="test" style="--bg:#d55401"></div>
<div class="test" style="--bg:#c1392b"></div>
<div class="test" style="--bg:#bec3c7"></div>
<div class="test" style="--bg:#808b8d"></div>
body{ height:100vh; background-color:#222;}
.test{
--color:#6ab150;
width:100px;
height:100px;
margin:.25em;
display:inline-block;
background-color: var(--bg);
}
var elemento = document.querySelectorAll(".test")[3];
console.log(elemento.style.getPropertyValue("--bg"));//para los estilos inline!!
console.log(window.getComputedStyle(elemento).getPropertyValue("--color"));
elemento.style.setProperty("--foo", "test");
console.log(window.getComputedStyle(elemento).getPropertyValue("--foo"));
Also see: Tab Triggers