Reactive CSS variables

I've been using CSS variables a lot lately as properties for Angular components. These are emulated Web Components, so component styling is encapsulated and can't be changed outside of the component itself, except by using CSS variables. In my case it's mostly spacing related properties such as margins. Because the trickiest thing is to control spacing of nested components. By utilizing CSS variables it's possible to control this parent > child specific behaviour pretty well. Actually, it's the only thing that seems to be working for in this situation, having tried several different ways to control the spacing between components. CSS variables are the way to go for now (until I can use CSS shadow parts with Angular).