<p id="p1" class="cls">Some text. Should be red</p>
<p id="p2" class="cls" style="--var1: blue">Some text. Should be blue</p>
<p id="p3" class="cls">Some text. Should be green</p>
:root {
--var1: red;
}
.cls {
color: var(--var1);
}
$('#p3').attr('style','--var1: green');
This Pen doesn't use any external CSS resources.