Tengo un componente web que representa una tarjeta con datos de seguimiento de tiempo. Cuando cambio entre diario/semanal/mensual, se realiza una recuperación y los atributos del componente cambian, pero incluso yo puedo ver los cambios dentro del estado del componente, el componente no representa estos cambios
class TimePanel extends HTMLElement { constructor() { super(); this.attachShadow({ mode: "open" }) } getTemplate() { const template = document.createElement('template'); template.innerHTML = ` <section class="general-panel"> <div class="inner-card work"> <div class="sub-panel"> <div class="flex-container"> <p class="card-title">${this.area}</p> <span class="options"> <img src="../../images/icon-ellipsis.svg" alt=""> </span> </div> <div class="flex-container"> <span class="time">${this.time}Hs</span> <span class="previous-date">last week - ${this.previousDate}Hs</span> </div> </div> </div> ` return template; } connectedCallback() { this.shadowRoot.append(this.getTemplate().content.cloneNode(true)) } static get observedAttributes() { return ['area','time','previous-date']; } attributeChangedCallback(name, old, newV) { if(name === 'area') { this.area = newV; } if(name === 'time') { this.time = newV; } if(name === 'previous-date') { this.previousDate = newV; } } } customElements.define('time-panel', TimePanel)Según el código que proporcionó, parece que le falta un getter y un setter para los atributos.
p.ej.
get area() { return this.getAttribute("area"); } set area(value) { this.setAttribute("area", value); }