Unable to set the Stepper CSS through JS in LWC

Question

I have template folder where in I have a progress Stepper when I click on it, I want the step to be updated or some colour to be added in that.

<div>
    <ul id="progress-bar" class="progressbar">
      <template if:true={isClickable}>
        <template for:each={navobj} for:item="step" for:index="index">
          <li key={step.indivId}>
            <a
              key={step.indivId}
              data-target-id="progress-bar"
              data-appindvid={step.indivId}
              onclick={linkOnSelect}
              data-id={step.id}
              data-appid={step.appId}
              >{step.name}</a
            >
          </li>
        </template>
      </template>
</ul>
</div>

---

linkOnSelect(event)
    { 
        var  currStep=event.target.dataset.id;
        this.updateProgressStepperStateLink(currStep);    
    }
updateProgressStepperStateLink(dataidvar) {        
        console.log('data-id='+dataidvar);
        var Celm = test; 
        var tr=document.getElementById(dataidvar).style.color = "green"; 
        console.log('h@='+tr);  
       // var classItem = document.getElementsByClassName(".active");
        }

But the issue is, it is not getting set.

.progressbar li {
    float: left;
    position: relative;
    z-index: 9;
    font-size: var(--peak-x-large);
    line-height: 24px;
    letter-spacing: normal;
    font-family: SourceSansPro-Regular;
    color: var(--river-bed);
    text-align: center;
}

.progressbar li.current {
    font-family: SourceSansPro-SemiBold;
    color: var(--shark);
    font-weight: normal;
}

.progressbar li:before {
    width: 20px;
    height: 20px;
    content: '';
    border: 2px solid #B0BAC5;
    background-color: #B0BAC5;
    display: block;
    text-align: center;
    margin: 0 auto 10px;
    border-radius: 50%;
    z-index: 9999;
}

.progressbar li:after {
    width: 75%;
    height: 4px;
    content: '';
    position: absolute;
    background-color: #B0BAC5;
    top: 7px;
    left: -37.5%;
    z-index: -1;
}

.progressbar li:first-child:after {
    content: none;
}

.progressbar li.active:before {
    border-color: #00778F;
    background-color: #00778F;
    content: "\2713";
    color: white;
    font-size: 12px;
    line-height: 18px;
}

.progressbar li.current:before {
    border-color: #00778F;
    border-width: 4px;
    background-color: white;
}

.progressbar li.active:after, .progressbar li.current:after {
    background-color: #00778F;
}

Answer 1

you might want to refer to the documentation: Access Elements the Component Owns

Don’t use the window or document global properties to query for DOM elements. See DOM Access Containment. Also, we don’t recommend using JavaScript to manipulate the DOM. It's better to use the Lightning Web Components HTML directives to write declarative code.

in a nutshell, you want to avoid using:

• document.getElementById
• document.getElementsByClassName

...etc, etc