Unable to add class to table rows using querySelector

Question

I have a table with nested rows that are dynamically created when a dropdown onchange event is fired. I'm having difficulty trying to dynamically add a class to the child table rows that are marked as labels. I set an attribute on the child rows data-childrow={l2.childRow}. When I try to use the query selector to find these rows to add the class it is always null no matter what I've tried. I'm sure there is a better way to do this than what I'm trying.

I was able to add the class to the parent row using a similar approach. It seems that at the time I'm checking for the attribute to add the class on the child rows, it doesn't exist yet.

Is there a way to add a class to the rows that are identified as label/header rows at the time they are being created?

JS:

handleStatusChange(e) {
    ...// irrevalent code removed from easier view 
    if(this.status === 'green') {
        var i = 0;
        var j = 0;
        this.levelTwo.forEach((item)=>{
            if(item.levelone != rowData.key) i++; 
            var childRowIndex = JSON.stringify(i) + JSON.stringify(j);         
            if(rowData.key === item.levelone) {                     
                rowData.rowList.push({value:item.value, key:item.key, isLabel:!item.isLabel, childRow:childRowIndex}); 
            }
            if(item.isLabel) {
                console.log('*************************************** isLabel is true');
                console.log('*************************************** childRowIndex ' + childRowIndex);
                const childRowHeader = this.template.querySelector(`tr[data-childrow="${childRowIndex}"]`);
                if(childRowHeader) {
                    this.template.querySelector(`tr[data-childrow="${childRowIndex}"]`).className = 'childRowHeading'; 
                }                          
            }
            j++;
        })                     
    }
}

HTML:

<template for:each={levelOne} for:item="l1" for:index="indexParent">
    <tr key={l1.key} data-parentrow={indexParent}>
        <td></td>
        <td>
            {l1.value}
        </td>
        <td>
            <lightning-combobox
                name="progress"
                value={l1.picklistValue}
                placeholder="--Please Select--"
                options={statuses}
                onchange={handleStatusChange}                                     
                data-index={indexParent} >
            </lightning-combobox> 
        </td>
    </tr>
    <template for:each={l1.rowList} for:item="l2" for:index="indexChild">
        <tr key={l2.key} data-childrow={l2.childRow}>
            <td>
                <template lwc:if={l2.isLabel}>
                    <lightning-input type="checkbox" name="input2"></lightning-input>
                </template>                              
            </td>
            <td colspan="2">
                {l2.value}
                <template lwc:if={l1.showTxtInput}>
                    <lightning-input type="text" label="Notate..." value=""></lightning-input>
                </template>
            </td>
        </tr>
    </template>
</template>

Answer 1

Changes you make to the data won't render in HTML until the next lifecycle processes. That's why querySelector can't find the elements. Instead, just add whatever additional properties you need into the row data in the rowList array, then you can bind those properties directly to the template.