JavaScript Academy · leksjon

Shadow DOM og inkapsling

Isoler stiler og markup i shadow roots.

Leksjon 3 av 413 trinn

Shadow DOM og inkapsling er en gratis leksjon i JavaScript Academy på CoddyKit. Dette er leksjon 3 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i JavaScript Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i JavaScript Academy inneholder totalt 4 leksjoner.

Hva er Shadow DOM?

Shadow DOM gir et element et privat, innkapslet DOM-tre. Oppmerking og stiler i treet er isolert fra resten av siden.

CSS utenfra lekker ikke inn.
CSS innenfra lekker ikke ut.
Den interne strukturen er skjult for vanlige DOM-spørringer.

attachShadow

Du oppretter et shadow tree ved å kalle this.attachShadow({ mode: 'open' }). Den returnerer en shadow root som du fyller ut som en vanlig node.

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

Modusen open kontra closed

Alternativet mode styrer tilgang utenfra:

'open' — roten er tilgjengelig via element.shadowRoot.
'closed' — element.shadowRoot returnerer null; bare koden din har referansen.

De fleste komponenter bruker 'open' for enklere feilsøking.

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

Fylle ut shadow root

Sett shadowRoot.innerHTML for å bygge det innkapslede innholdet. Denne oppmerkingen er usynlig for document.querySelector.

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);

Avgrensede stiler

En style-tagg inne i shadow root påvirker bare den roten. Den samme selektoren utenfor komponenten påvirkes ikke, og sidestiler lekker ikke inn.

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

Selektoren :host

Inne i shadow-stiler velger :host selve det egendefinerte elementet (verten for shadow tree). Bruk den til å style komponentens ytre boks.

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

Stilisolasjon i praksis

Innkapsling betyr at komponentforfattere og sideforfattere ikke lenger konkurrerer om klassenavn. En .title-regel inne i én komponent påvirker aldri en annen .title et annet sted.

Ingen globale CSS-kollisjoner.
Enkle, generiske selektorer er trygge igjen.

Spørringer i shadow root

For å få tilgang til interne noder må du spørre shadow root, ikke dokumentet. Shadow root støtter de samme spørringsmetodene.

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);

Hendelser krysser grensen

Mange hendelser (som click) bobler ut av Shadow DOM, men får nytt mål, slik at lyttere utenfor ser vertselementet og ikke den interne noden. Dette bevarer innkapslingen.

// 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
  });

Arvelige stiler

Noen få CSS-egenskaper (som color og font-family) arves gjennom shadow-grensen fordi arv flyter nedover i det sammensatte treet. Du kan ta i bruk sidens utseende ved å basere deg på arv eller bruke egendefinerte CSS-egenskaper.

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

Når bør du bruke Shadow DOM?

Bruk Shadow DOM når du trenger sterk isolasjon av stiler og oppmerking for en gjenbrukbar widget. Unngå det når du vil at komponenten fritt skal arve og delta i sidens globale stiler.

Kort sjekk

Test forståelsen din av Shadow DOM.

Besvar den i den interaktive leksjonen

Oppsummering

Du har lært om Shadow DOM:

attachShadow({ mode }) oppretter et isolert tre.
'open' eksponerer shadowRoot; 'closed' skjuler det.
Interne style-tagger er avgrenset; :host styler selve elementet.
Spørringer kjøres mot shadow root, ikke dokumentet.
Hendelser får nye mål for å bevare innkapslingen.

Deretter skal vi gjenbruke oppmerking med maler og slots.

Gratis å komme i gang

Lær deg JavaScript med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 59
Leksjoner: 200

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Shadow DOM og inkapsling» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien JavaScript Academy, inkludert «Shadow DOM og inkapsling», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i JavaScript Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Shadow DOM og inkapsling»?

Isoler stiler og markup i shadow roots. Du øver på JavaScript Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med JavaScript Academy?

Ingen tidligere erfaring er nødvendig. JavaScript Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 3 av 4.

Hvor lang tid tar leksjonen «Shadow DOM og inkapsling»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne JavaScript Academy-leksjonen?

Ja. Alle JavaScript Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

← Tilbake til JavaScript Academy