Web-komponentit: declarative shadow DOM

CSS

HTML

Javascript

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

/* Tässä esimerkissä javascriptia EI tarvita rakenteen luomiseen: shadow root
   on liitetty jo merkkauksessa shadowrootmode-attribuutilla. Skripti vain
   tarkastelee lopputulosta.

Tämä on declarative shadow DOM:in koko pointti: palvelin voi lähettää
   valmiin rakenteen, eikä ensimmäinen renderöinti odota skriptiä. */

const kortti = document.querySelector("esittely-kortti");
const tila = document.getElementById("tila");

/* shadowRoot on olemassa, vaikka attachShadow-kutsua ei ole missään */
tila.textContent = kortti.shadowRoot === null
  ? "ei (selain ei tue declarative shadow DOM:ia)"
  : `kyllä, tila on "${kortti.shadowRoot.mode}"`;

console.log("shadowRoot:", kortti.shadowRoot);

/* template-elementti on kadonnut: selain poisti sen ja teki sisällöstä
   shadow DOM:in */
console.log("template jäljellä dokumentissa:",
            kortti.querySelector("template") !== null);

/* Shadow DOM:in sisältöön ei pääse dokumentista käsin */
console.log("h3 dokumentista        :", document.querySelector("esittely-kortti h3"));
console.log("h3 shadowRootin kautta :", kortti.shadowRoot.querySelector("h3"));

/* Sisältö on tavallista DOM-puuta, joten slotiin sijoitettua sisältöä voi
   muuttaa normaalisti - se ei ole shadow DOM:issa vaan elementin omana
   sisältönä. */
document.getElementById("vaihda").addEventListener("click", function () {
  const otsikko = kortti.querySelector('[slot="otsikko"]');

otsikko.textContent = otsikko.textContent === "Polo" ? "Golf" : "Polo";
  console.log("otsikko on nyt", otsikko.textContent);
});

/* Jos komponentille halutaan toimintaa, luokka rekisteröidään tavalliseen
   tapaan. connectedCallback EI saa luoda shadow rootia uudelleen: se on jo
   olemassa, ja attachShadow heittäisi poikkeuksen. */
if (!customElements.get("esittely-kortti")) {

class Kortti extends HTMLElement {
    connectedCallback() {
      /* Tarkistus: onko shadow root jo merkkauksesta? */
      if (this.shadowRoot === null) {
        console.log("shadow rootia ei ollut, luodaan se javascriptilla");
        this.attachShadow({ mode: "open" });
      }
      else {
        console.log("shadow root tuli merkkauksesta, ei luoda uutta");
      }
    }
  }

customElements.define("esittely-kortti", Kortti);
}

Shadow root suoraan merkkauksessa

Ei otsikkoa

CSS

HTML

Javascript

Konsoli