Web-komponentit: shadow DOM ja sen rajat

CSS

HTML

Javascript

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

/* Samaa nimeä ei voi rekisteröidä kahdesti, joten define on suojattava.
   Jos muutat luokkia, lataa sivu uudelleen. */

if (!customElements.get("shadow-kortti")) {

/* ---------- 1. kortti SHADOW ROOTILLA ---------- */

class ShadowKortti extends HTMLElement {
    constructor() {
      super();

/* Shadow rootin saa liittää konstruktorissa: se on elementin omaa
         sisäistä rakennetta eikä ulkopuolista dokumenttia. */
      const juuri = this.attachShadow({ mode: "open" });

/* :host on elementti itse. slot kertoo, mihin elementin oma
         sisältö sijoitetaan. */
      juuri.innerHTML = `
        <style>
          :host { display: block; }
          .kortti { border: 2px dashed currentColor; padding: 0.3rem; }
          h3 { margin: 0; color: #007000; }
        </style>

<div class="kortti">
          <h3><slot name="otsikko">Ei otsikkoa</slot></h3>
          <slot></slot>
        </div>
      `;
    }
  }

customElements.define("shadow-kortti", ShadowKortti);

/* ---------- 2. kortti ILMAN shadow rootia ---------- */

class TavallinenKortti extends HTMLElement {
    connectedCallback() {
      if (this.rakennettu) {
        return;
      }

/* Ilman shadow rootia sisältö rakennetaan elementtiin itseensä.
         slot-elementtiä ei voi käyttää, joten oma sisältö siirretään
         käsin oikeisiin paikkoihin. */
      const otsikko = this.querySelector('[slot="otsikko"]');
      const muut = [...this.children].filter((l) => l !== otsikko);

const kortti = document.createElement("div");
      kortti.className = "kortti";

const h3 = document.createElement("h3");

if (otsikko !== null) {
        h3.append(otsikko);
      }

kortti.append(h3, ...muut);
      this.replaceChildren(kortti);

this.rakennettu = true;
    }
  }

customElements.define("tavallinen-kortti", TavallinenKortti);

/* ---------- 3. lomakekenttä shadow rootin sisällä ---------- */

class ShadowKentta extends HTMLElement {
    constructor() {
      super();

const juuri = this.attachShadow({ mode: "open" });

juuri.innerHTML = `
        <p>
          <label for="shadow DOM:issa">Kenttä shadow DOM:issa</label>
          <input type="text" id="shadow DOM:issa" name="shadow DOM:issa" value="ei näy" />
        </p>
      `;
    }
  }

customElements.define("shadow-kentta", ShadowKentta);
}

/* ---- tämä osa suoritetaan uudelleen joka Run-painalluksella ---- */

console.log("--- 1. querySelector ei näe shadow DOM:in sisään ---");

const shadowKortti = document.querySelector("shadow-kortti");
const tavallinen = document.querySelector("tavallinen-kortti");

console.log("shadow-kortti, h3 dokumentista :", document.querySelector("shadow-kortti h3"));
console.log("tavallinen-kortti, h3         :", document.querySelector("tavallinen-kortti h3"));

/* Shadow DOM:in sisältöön pääsee vain shadowRoot-ominaisuuden kautta, ja
   vain jos tila on open. */
console.log("shadowRoot-ominaisuuden kautta:", shadowKortti.shadowRoot.querySelector("h3"));

console.log("--- 2. sivun tyylit eivät pääse shadow DOM:iin ---");
console.log("Katso esikatselua: tavallisen kortin otsikko on punainen,");
console.log("shadow-kortin vihreä - sen väri tulee shadow DOM:in omasta tyylistä.");

console.log("--- 3. shadow DOM:in kenttä ei osallistu lomakkeeseen ---");

document.getElementById("lomake").addEventListener("submit", function (e) {
  e.preventDefault();

/* FormData kerää vain ne kentät, jotka ovat lomakkeen omassa puussa.
     Shadow DOM:in sisällä oleva input jää kokonaan pois - eikä sitä saa
     mukaan ilman ElementInternals-rajapintaa. */
  const data = new FormData(e.target);

console.log("FormData-olion sisältö:", Object.fromEntries(data));
  console.log("shadow DOM:in kenttä mukana:", data.has("shadow DOM:issa"));
});

console.log("Paina Lähetä-painiketta.");

Kapselointi

Lomake

CSS

HTML

Javascript

Konsoli