prop-for-that: CSS reacts, JS just listens

This is neat. Effectively injecting a tonne of JavaScript based sensors into the elements that ask for the particular category via data-props-for, such as:

<div id="meter" data-props-for="range">
  <input type="range" min="0" max="100" value="42">
</div>

With CSS like:

@container style(--live-value: 100) {
  .gauge__num { color: var(--max-tint); }
  .gauge__flag::after { content: 'max'; }
}

Lots of useful categories too.

Source: prop-for-that.netlify.app