JavaScript Academy · Oppitunti

Shadow DOM ja kapselointi

Eristäkää tyylit ja merkintä shadow root -juuriin.

Oppitunti 3/413 vaihetta

Shadow DOM ja kapselointi on ilmainen JavaScript Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu JavaScript Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. JavaScript Academy-kurssilla on yhteensä 4 oppituntia.

Mikä Shadow DOM on

Shadow DOM antaa elementille yksityisen, kapseloidun DOM-puun. Sen sisällä oleva HTML-rakenne ja tyylit on eristetty muusta sivusta.

Ulkopuolinen CSS ei vaikuta sen sisälle.
Sisäpuolinen CSS ei vaikuta sen ulkopuolelle.
Sisäinen rakenne on piilossa tavallisilta DOM-kyselyiltä.

attachShadow

Luot shadow-puun kutsumalla metodia this.attachShadow({ mode: 'open' }). Se palauttaa shadow root-juuren, jota voit täyttää tavallisen solmun tapaan.

class FancyBox extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }
}
customElements.define('fancy-box', FancyBox);

open- ja closed-tilat

mode-asetus määrittää ulkopuolisen pääsyn:

'open' — juureen pääsee käsiksi ominaisuuden element.shadowRoot kautta.
'closed' — element.shadowRoot palauttaa arvon null; vain oma koodisi säilyttää viittauksen juureen.

Useimmat komponentit käyttävät arvoa 'open' helpomman vianmäärityksen vuoksi.

const root = this.attachShadow({ mode: 'open' });
// Later, from outside:
// myEl.shadowRoot  -> the shadow root (open)
// closed mode would give null here

Shadow rootin täyttäminen

Rakenna kapseloitu sisältö asettamalla ominaisuus shadowRoot.innerHTML. Tämä HTML-rakenne ei näy document.querySelector-kyselylle.

class FancyBox extends HTMLElement {
  constructor() {
    super();
    const root = this.attachShadow({ mode: 'open' });
    root.innerHTML = '<p>I live inside the shadow DOM</p>';
  }
}
customElements.define('fancy-box', FancyBox);

Rajatut tyylit

Shadow rootin sisällä oleva style-tagi vaikuttaa vain kyseiseen juureen. Sama valitsin komponentin ulkopuolella ei vaikuta siihen, eivätkä sivun tyylit vuoda sen sisälle.

root.innerHTML =
  '<style>p { color: rebeccapurple; }</style>' +
  '<p>Only this paragraph is purple.</p>';
// A <p> elsewhere on the page is NOT affected.

The :host -valitsin

Shadow-tyylien sisällä :host kohdistuu itse mukautettuun elementtiin eli shadow-puun isäntäelementtiin. Käytä sitä komponentin ulomman laatikon tyylittelyyn.

root.innerHTML =
  '<style>' +
  ':host { display: block; border: 1px solid gray; }' +
  ':host(.active) { border-color: green; }' +
  '</style>' +
  '<slot></slot>';

Tyylien eristys käytännössä

Kapselointi tarkoittaa, etteivät komponenttien ja sivujen tekijät enää kilpaile luokkien nimistä. Yhden komponentin sisällä oleva .title-sääntö ei koskaan vaikuta muualla olevaan .title-luokkaan.

Ei maailmanlaajuisia CSS-ristiriitoja.
Yksinkertaiset ja yleiset valitsimet ovat jälleen turvallisia.

Kyselyt shadow rootin sisältä

Kun haluat käsitellä sisäisiä solmuja, kohdista kysely shadow rootiin, älä dokumenttiin. Shadow root tukee samoja kyselymetodeja.

class ToggleButton extends HTMLElement {
  constructor() {
    super();
    const root = this.attachShadow({ mode: 'open' });
    root.innerHTML = '<button>Off</button>';
    this.btn = root.querySelector('button');
  }
}
customElements.define('toggle-button', ToggleButton);

Tapahtumat ylittävät rajan

Monet tapahtumat, kuten click, kuplivat ulos Shadow DOMista, mutta ne kohdistetaan uudelleen, joten ulkopuoliset kuuntelijat näkevät sisäisen solmun sijaan isäntäelementin. Näin kapselointi säilyy.

// Outside listener sees event.target as <toggle-button>,
// not the inner <button>.
document.querySelector('toggle-button')
  .addEventListener('click', e => {
    console.log(e.target.tagName); // TOGGLE-BUTTON
  });

Periytyvät tyylit

Muutamat CSS-ominaisuudet, kuten color ja font-family, periytyvät shadow-rajan läpi, koska periytyminen etenee koostetussa puussa. Voit ottaa sivun ulkoasun käyttöön luottamalla periytymiseen tai käyttämällä CSS:n mukautettuja ominaisuuksia.

// :host { color: inherit; }
// CSS custom properties also pierce the boundary:
// :host { color: var(--text-color, black); }

Milloin Shadow DOMia kannattaa käyttää

Käyttäkää Shadow DOMia, kun uudelleenkäytettävä widget tarvitsee tyylien ja HTML-rakenteen vahvaa eristystä. Jättäkää se pois, kun haluatte komponentin perivän sivun tyylit ja osallistuvan vapaasti sen maailmanlaajuisiin tyyleihin.

Pikatarkistus

Testaa, miten hyvin ymmärrät Shadow DOMin.

Vastaa interaktiivisessa oppitunnissa

Kertaus

Opit Shadow DOMista:

attachShadow({ mode }) luo eristetyn puun.
'open' tuo shadowRoot-ominaisuuden saataville; 'closed' piilottaa sen.
Sisäiset style-tagit on rajattu; :host tyylittelee itse elementtiä.
Kyselyt kohdistetaan shadow rootiin, ei dokumenttiin.
Tapahtumat kohdistetaan uudelleen kapseloinnin säilyttämiseksi.

Seuraavaksi käytämme HTML-rakennetta uudelleen templatejen ja slottien avulla.

Aloita maksutta

Opi JavaScript tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 59
Oppitunnit: 200

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Shadow DOM ja kapselointi” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa JavaScript Academy-oppimispolun 3 oppituntia, myös oppitunnin “Shadow DOM ja kapselointi”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. JavaScript Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Shadow DOM ja kapselointi”?

Eristäkää tyylit ja merkintä shadow root -juuriin. Harjoittelet JavaScript Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni JavaScript Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin JavaScript Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 3/4.

Kuinka kauan ”Shadow DOM ja kapselointi”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä JavaScript Academy-oppitunnilla?

Kyllä. Jokainen JavaScript Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: JavaScript Academy