Web-komponentit: template ja kloonaus

CSS

HTML

Javascript

/* suorita tämä koodi Run-painikkeella */

const AUTOT = [
  { malli: "Polo", valmistaja: "Volkswagen" },
  { malli: "Micra", valmistaja: "Nissan" },

/* Huomaa tämä: mallin nimessä on merkkausta. textContent asettaa sen
     tekstinä, joten se näkyy sellaisenaan eikä siitä tule elementtejä.
     innerHTML olisi tässä tietoturva-aukko. */
  { malli: "<img src=x onerror=alert(1)>", valmistaja: "Ei ole olemassa" }
];

const pohja = document.getElementById("pohja");
const lista = document.getElementById("lista");
const mittaus = document.getElementById("mittaus");

/* Templaten sisältö ei ole sivulla: se ei näy, eikä querySelector löydä
   sitä dokumentista. Sisältöön pääsee vain content-ominaisuuden kautta. */
mittaus.textContent =
  `dokumentista löytyy ${document.querySelectorAll("li.auto").length} kpl, ` +
  `templatesta ${pohja.content.querySelectorAll("li.auto").length} kpl`;

console.log("template.content on", pohja.content.constructor.name);

/**
 * Luo yhden listarivin templatesta.
 *
 * @param {Object} auto Auton tiedot
 * @returns {DocumentFragment} Valmis rivi
 */
const luoRivi = function (auto) {
  /* Ensimmäinen parametri true kopioi myös sisällön. Ilman sitä saisi
     tyhjän fragmentin. */
  const rivi = pohja.content.cloneNode(true);

rivi.querySelector(".malli").textContent = auto.malli;
  rivi.querySelector(".valmistaja").textContent = auto.valmistaja;

return rivi;
};

/* replaceChildren tyhjentää ja täyttää yhdellä kutsulla. Fragmentti
   sulaa lisäyksessä pois, joten listaan tulee vain sen lapset. */
lista.replaceChildren(...AUTOT.map(luoRivi));

console.log("listassa nyt", lista.children.length, "riviä");

/* Poisto delegoinnilla: yksi käsittelijä koko listalle. Toimii myös
   riveille, jotka lisätään vasta myöhemmin. */
lista.addEventListener("click", function (e) {
  const nappi = e.target.closest("button");

if (nappi === null) {
    return;
  }

nappi.closest("li").remove();
  console.log("poistettu, jäljellä", lista.children.length);
});

/* Lisäyspainike osoittaa, että sama pohja kelpaa uudelleen. */
let laskuri = 0;

document.getElementById("lisaa").addEventListener("click", function () {
  laskuri += 1;

lista.append(luoRivi({
    malli: `Uusi malli ${laskuri}`,
    valmistaja: "Tehdas"
  }));
});

Autolistaus templatesta

CSS

HTML

Javascript

Konsoli