Aggiungere CSS e markup

Una volta introdotti i principi di base su cui poggia la definizione di un custom element, iniziamo a costruire la struttura del nostro componente definendo il suo markup ed il CSS, come mostrato di seguito:

const styleMarkup = `
<style>
.rating {
	color: orange;
}
</style>`;
const componentMarkup = `
<div>
  <span class="rating">&#x2605;</span>
  <span class="rating">&#x2605;</span>
  <span class="rating">&#x2605;</span>
  <span class="rating">&#x2606;</span>
  <span class="rating">&#x2606;</span>
  <span class="rating">&#x2606;</span>
</div>`;
class MyRating extends HTMLElement {
    constructor() {
        super();
    }
    connectedCallback() {
        this.innerHTML = styleMarkup + componentMarkup;
    }
}

Abbiamo definito le costanti di tipo stringa che definiscono il markup per
lo stile e la definizione delle stelle da visualizzare tramite codici
Unicode e le abbiamo utilizzate per assegnarle alla proprietà
innerHTML
del componente. Il risultato è quello atteso, come mostrato dalla seguente
immagine:

Possiamo ottenere lo stesso risultato generando il markup del componente tramite le API del DOM, come mostra il seguente codice:

const styleRules = `
.rating {
	color: orange;
}`;
class MyRating extends HTMLElement {
    constructor() {
        super();
    }
    connectedCallback() {
        this.createComponent()
    }
    createComponent() {
        let style = document.createElement("style");
        style.appendChild(document.createTextNode(styleRules));
        this.appendChild(style);
        let starList = this.createStarList();
        this.appendChild(starList);
    }
    createStarList() {
        let div = document.createElement("div");
        for (let i = 1; i <= 3; i++) {
            let star = this.createStar("&#x2605;");
            div.appendChild(star);
        }
        for (let i = 1; i <= 2; i++) {
            let star = this.createStar("&#x2606;");
            div.appendChild(star);
        }
        return div;
    }
    createStar(starCode) {
        let span = document.createElement("span");
        span.setAttribute("class", "rating");
        span.innerHTML = starCode;
        return span;
    }
}
customElements.define("my-rating", MyRating);

Anche se questo approccio è più prolisso, esso ci offre la possibilità di
prepararci per implementare quelle funzionalità che ci aspetteremmo da un
comune elemento HTML. Ad esempio, possiamo definire delle proprietà del
componente che ci consentono di stabilire il massimo valore assegnabile,
corrispondente al numero totale di stelle visualizzate, ed il valore
correntemente assegnato, corrispondente al numero di stelle internamente
colorate di arancione.