Given the below DOM hierarchy, the same elements (sharing the same class) are nested, and so they share the same CSS variable --show.
When --show is set on the parent to any value (here it's set to 1) I would like it to affect only that node and not any children, therefore I set --show: unset; so each element would start with that, unless instructed otherwise, and the inspector agrees:
But for some reason, --show is not really using the unset value for the children, like expected.
The inspector shows it's being overridden like expected, but in reality it is not, and still have the value of the parent, 1:
.foo{
--show: unset;
border: 2px dashed red;
padding: 5px;
margin: 5px;
opacity: var(--show, 0);
}<div class='foo' style='--show:1'>
<div class='foo'>1 - should have opacity 0</div>
<div class='foo'>2 - should have opacity 0</div>
</div>Based on the principle that unset uses the fallback value:
body{
--show: unset;
box-shadow: 0 0 0 999px red;
opacity: var(--show, 0);
}