Change status item

Hi. I need help.
I’m trying to understand how hass works. As well as this code I was able to add events.
Now I need to know how to update the status of an item. I want them to add or remove a class when they change the state. But I can not make reference to the object in order to do it. Someone could help me?
The problem is at the end

Thank you

Blockquote

set hass(hass) {
var card;
const entities = this.config.entities;
var state = hass.states[entities[0].entity];
var stateStr = state ? state.state : ‘unavailable’;
var colorIcon;
var strHTML = ‘’;
const root = this.shadowRoot;

if (!this.content) {
    card = document.createElement('ha-card');
    card.header = 'Sonoff settings devices';
    this.content = document.createElement('div');
    const style = document.createElement('style');
    
    style.textContent = `
        table {
            width: 100%;
            padding-bottom: 10px;
            padding-left: 15px;
            padding-right: 15px;
        }
        
        ha-icon {
            cursor:pointer;
        }    
        
        ha-icon.on {
            color: var(--state-icon-active-color);
            cursor:pointer;
        }    
        
        ha-icon.off {
            color: var(--state-icon-color);
        }    

` ;

    entities.forEach(function(element) {
        state = hass.states[element.entity];
        stateStr = state ? state.state : 'unavailable';
        strHTML += `
            <table>
                <tr>
                    <td witdth="80%">${element.name}</td><td align="right">
                    
                    <span class="ha-icon">
                        <ha-icon id="${element.entity}_power" class="icono ${stateStr}" icon="mdi:power" ></ha-icon>
                        <ha-icon id="${element.entity}_setting" class="icono ${stateStr}" icon="mdi:settings" ></ha-icon>
                        <ha-icon id="${element.entity}_timer" class="icono ${stateStr}" icon="mdi:timer" ></ha-icon>
                    </span></td>
                </tr>
            </table>
            `;
    });
    this.content.innerHTML = strHTML;
  
    card.appendChild(style); 
    card.appendChild(this.content);
    this.appendChild(card);
    card.querySelectorAll(".icono").forEach(element => {
        element.addEventListener('click', event => {
            this._updateCard();
        });
    });   
    
}

entities.forEach(function(element) {
    state = hass.states[element.entity];
    stateStr = state ? state.state : 'unavailable';
    console.log(???.getElementById(element.entity+"_power")); 
    
    //chage style item
});   

}