Tervehdykset
Toinen säiliö. Siirto tähän laukaisee elinkaaritakaisinkutsut.
CSS
/* Esikatselualue määrittelee sekä taustan että tekstin värin, jotta pari on varmasti luettava kummassakin teemassa. */ #alue { background-color: #ffffff; color: #1a1a1a; padding: 0.5rem; } @media (prefers-color-scheme: dark) { #alue { background-color: #1e1e1e; color: #f0f0f0; } } /* Oma elementti on oletuksena display: inline, joten lohkotasoinen asettelu on kerrottava erikseen. */ tervehdys-teksti { display: block; padding: 0.3rem; border: 1px solid currentColor; margin-bottom: 0.3rem; } /* :defined osuu vasta kun elementti on rekisteröity. Näin voi piilottaa keskeneräisen sisällön siihen asti. */ tervehdys-teksti:not(:defined) { visibility: hidden; } #toinen { margin-top: 1rem; padding: 0.3rem; border: 1px dashed currentColor; }
HTML
<div id="alue"> <h2>Tervehdykset</h2> <div id="sailio"> <tervehdys-teksti nimi="Matti"></tervehdys-teksti> <tervehdys-teksti nimi="Maija"></tervehdys-teksti> </div> <div id="toinen"> <p>Toinen säiliö. Siirto tähän laukaisee elinkaaritakaisinkutsut.</p> </div> </div>
Javascript
/* suorita tämä koodi Run-painikkeella */ /* HUOM. Samaa elementtinimeä ei voi rekisteröidä kahdesti, joten define-kutsu on suojattava. Jos muutat itse luokkaa, lataa sivu uudelleen - jo rekisteröityä luokkaa ei voi vaihtaa. */ if (!customElements.get("tervehdys-teksti")) { class Tervehdys extends HTMLElement { constructor() { /* super() on kutsuttava ensimmäisenä. Konstruktorissa EI saa lukea attribuutteja eikä koskea lapsiin: niitä ei ole välttämättä vielä jäsennetty. */ super(); this.liitoksia = 0; console.log("constructor"); } connectedCallback() { /* Tämä laukeaa JOKA KERTA kun elementti liitetään dokumenttiin - myös siirroissa, koska siirto on irrotus ja uudelleenliitos. */ this.liitoksia += 1; const nimi = this.getAttribute("nimi") ?? "maailma"; this.textContent = `Hei ${nimi}! (liitoksia: ${this.liitoksia})`; console.log("connectedCallback:", nimi, "| liitoksia", this.liitoksia); } disconnectedCallback() { /* Siivous kuuluu tänne: ajastimet, tarkkailijat ja muihin elementteihin liitetyt käsittelijät. */ console.log("disconnectedCallback:", this.getAttribute("nimi")); } } customElements.define("tervehdys-teksti", Tervehdys); } /* ---- tämä osa suoritetaan uudelleen joka Run-painalluksella ---- */ const sailio = document.getElementById("sailio"); const toinen = document.getElementById("toinen"); /* Elementti voidaan luoda myös javascriptilla */ const uusi = document.createElement("tervehdys-teksti"); uusi.setAttribute("nimi", "javascriptista luotu"); sailio.append(uusi); /* Siirretään ensimmäinen elementti toiseen säiliöön sekunnin kuluttua. Katso konsolista: disconnectedCallback ja connectedCallback laukeavat molemmat, ja liitoslaskuri kasvaa. */ setTimeout(function () { const ensimmainen = sailio.querySelector("tervehdys-teksti"); if (ensimmainen !== null) { console.log("--- siirretään toiseen säiliöön ---"); toinen.append(ensimmainen); } }, 1000);
Konsoli