htl-conditional-css.html

<div class="container ... ">
  <div class="
    component ... ${properties.step < 1 ? 'inactive' : ''}
    ${properties.step === 1 ? 'active' : ''}
    ${properties.step > 1 ? 'completed' : ''}
  ">
    STEP 1
  </div>
  <div class="
    component ... ${properties.step < 2 ? 'inactive' : ''}
    ${properties.step === 2 ? 'active' : ''}
    ${properties.step > 2 ? 'completed' : ''}
  ">
    STEP 2
  </div>
  <div class="
    component ... ${properties.step < 3 ? 'inactive' : ''}
    ${properties.step === 3 ? 'active' : ''}
    ${properties.step > 3 ? 'completed' : ''}
  ">
    STEP 3
  </div>

</div>