Mappare gli attributi sulle proprietà

Vediamo ora il processo inverso, cioè come riflettere le modifiche agli attributi nel markup della pagina HTML sulle proprietà del Web component. Il meccanismo che andremo ad implementare si basa sulla possibilità di dichiarare gli attributi da monitorare tramite il getter statico observedAttributes(). In pratica si tratta di aggiungere al nostro componente questo getter che restituisce un array di stringhe rappresentanti i nomi degli attributi a cui siamo interessati. Il seguente codice mostra la nostra implementazione:

static get observedAttributes() {
   return ["max-value", "value"];
}

La presenza di questa proprietà in sola lettura fa si che il browser notifichi al nostro componente quando uno di questi attributi viene modificato. La notifica può essere intercettata implementando il metodo attributeChangedCallback(), come mostrato dal seguente esempio:

attributeChangedCallback(name, oldValue, newValue) {
    if (oldValue !== newValue) {
        switch (name) {
            case "max-value":
                this._maxValue = newValue;
                break;
            case "value":
                this._value = newValue;
                break;
        }
        this.replaceStarList();
    }
}

Il metodo riceve come argomenti il nome dell'attributo che è stato modificato, il vecchio valore dell'attributo ed il nuovo valore. In base al nome dell'attributo viene aggiornata la corrispondente proprietà di appoggio e viene invocato il metodo replaceStarList() che aggiorna le stelle visualizzate. Dal momento che invochiamo l'aggiornamento visuale quando il valore di un attributo cambia, possiamo togliere la chiamata a replaceStarList() dal codice che avevamo scritto per l'aggiornamento delle proprietà:

set maxValue(val) {
        this._maxValue = val;
        this.setAttribute("max-value", val);
    }
    ...
    set value(val) {
        this._value = val;
        this.setAttribute("value", val);
    }

Infatti, aggiornando l'attributo tramite setAttribute() otterremo il nuovo rendering implicitamente quando verrà eseguito il metodo attributeChangedCallback().

Questo codice ci consente di specificare il numero di stelle da visualizzare anche tramite markup, come nel seguente esempio:

<my-rating id="myRatingComponent" max-value="10" value="6"></my-rating>

Naturalmente possiamo ottenere la variazione delle stelle da visualizzare modificando il valore delle proprietà anche dopo l'inizializzazione, come mostra il seguente codice che possiamo provare ad inserire all'interno della pagina HTML che contiene il nostro componente:

<script>
setTimeout(function() {
   let myRatingComponent = document.getElementById("myRatingComponent");
       myRatingComponent.value = 4;
   }, 5000)
</script>

Dopo circa cinque secondi dalla visualizzazione del nostro componente con i valori iniziali, vedremo visualizzare quattro stelle internamente colorate.