HTML Academy · Lektion

attachShadow og Shadow Root

Opret et indkapslet shadow tree på et værts-element

Lektion 1 af 413 trin

attachShadow og Shadow Root er en gratis HTML Academy-lektion på CoddyKit. Dette er lektion 1 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i HTML Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. HTML Academy-kurset indeholder 4 lektioner i alt.

Hvad er Shadow DOM?

Shadow DOM giver et element sit eget isolerede DOM-træ (shadow-træet), som ikke vises i sidens hoved-DOM. CSS udefra trænger ikke ind, og intern CSS trænger ikke ud — det giver perfekt indkapsling af komponenter.

Tilknytning af en Shadow Root

Kald this.attachShadow({ mode: "open" }) fra konstruktøren eller connectedCallback i et brugerdefineret element. Metoden returnerer en ShadowRoot, som du kan udfylde ligesom et almindeligt DOM-træ ved hjælp af innerHTML, appendChild osv.

class MyCard extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: "open" });
    shadow.innerHTML = "<style>p{color:red}</style><p>Hello</p>";
  }
}

Åben kontra lukket tilstand

mode: "open" gør shadow-træet tilgængeligt som element.shadowRoot. mode: "closed" skjuler det — element.shadowRoot returnerer null, så eksterne scripts ikke kan gå ind i træet. Lukket tilstand er sjældent nyttig i praksis, fordi den samme kode, som definerede elementet, alligevel kan beholde sin egen reference.

Indkapsling af typografi

Typografi, der defineres inde i shadow-træet (via <style> eller adopterede stylesheets), gælder kun inde i det pågældende shadow-træ. CSS-selektorer i hoveddokumentet matcher aldrig efterkommere i shadow-træet, og shadow-træets typografi trænger aldrig ud i dokumentet.

Selektoren :host

Fra shadow-træet vælges værtselementet (selve det brugerdefinerede element) med den særlige pseudo-klasse :host. :host(.large) matcher, når værten har klassen .large; :host([disabled]) matcher, når værten har attributten disabled.

:host {
  display: block;
  padding: 16px;
  border: 1px solid #ccc;
}
:host([disabled]) {
  opacity: 0.5;
  pointer-events: none;
}

display: block på brugerdefinerede elementer

Brugerdefinerede elementer har som standard display: inline. Inde i shadow root skal du anvende :host { display: block }, så elementet opfører sig som en komponent på blokniveau. Hvis du glemmer dette, er det en almindelig årsag til fejl af typen "min width: 100% ignoreres".

Sammensætning af hændelser

Hændelser, der bobler ud af shadow-træet, får værten som mål. Et klik på en intern knap når ydre lyttere med event.target === host. Brug event.composedPath() for at se det reelle interne mål, hvis du har brug for det.

composed: true for brugerdefinerede hændelser

Brugerdefinerede hændelser, der udløses inde i shadow root, krydser ikke grænsen, medmindre du opretter dem med både bubbles: true og composed: true. Uden composed ser lyttere uden for værtselementet aldrig hændelsen.

Scripts kan ikke lække ind

Eksterne scripts kan forespørge værtselementet, men ikke dets efterkommere i shadow DOM. document.querySelector("my-card span") returnerer ingenting, hvis <span> ligger inde i shadow-træet. Inkapsling beskytter interne dele mod utilsigtet kobling.

Deklarativ shadow DOM

Med <template shadowrootmode="open"> inde i et elements HTML opbygger browseren shadow-træet under parsing uden JavaScript. Det gør serverrenderede komponenter nemme at hydrere, fordi shadow-træet findes, før JavaScript kører.

Ydeevnehensyn

Hver shadow root har et vist overhead — en ekstra stilafgrænsning og et ekstra renderingslag. Hundredvis af shadow roots er uproblematiske; titusinder kan have betydning. For brugergrænseflader med meget høj tæthed, f.eks. store tabeller og virtualiserede lister, bør du måle ydeevnen for at bekræfte, at omkostningerne ved shadow DOM er acceptable.

Videnstjek

Hvad gør open mode, som closed mode ikke gør?

Besvar den i den interaktive lektion

Opsummering

attachShadow({ mode: "open" }) opretter et isoleret DOM-undertræ, hvor CSS og id'er ikke lækker i nogen retning. Style værtelementet med :host, husk display: block, og brug composed: true til hændelser, der skal ud gennem grænsen. Shadow-træet fungerer ellers som et almindeligt DOM-træ — innerHTML, appendChild og querySelector fungerer normalt inde i det.

Gratis at komme i gang

Lær HTML med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 40
Lektioner: 159

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “attachShadow og Shadow Root” gratis?

Ja — alle 3 lektioner i læringssporet HTML Academy, inklusive “attachShadow og Shadow Root”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. HTML Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “attachShadow og Shadow Root”?

Opret et indkapslet shadow tree på et værts-element Du øver dig i HTML Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på HTML Academy?

Der kræves ingen tidligere erfaring. HTML Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 1 af 4.

Hvor lang tid tager lektionen “attachShadow og Shadow Root”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne HTML Academy-lektion?

Ja. Alle HTML Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

← Tilbage til HTML Academy