Omfattningsbegränsade stilar i Shadow DOM
Skriv CSS som endast påverkar element i skuggträdet
Omfattningsbegränsade stilar i Shadow DOM är en gratis lektion i HTML Academy på CoddyKit. Detta är lektion 3 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för HTML Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i HTML Academy innehåller totalt 4 lektioner.
CSS-inkapsling som standard
Varje <style>-regel inuti en shadow root gäller endast inuti den rooten. p { color: red } i en shadow tree färgar endast stycken inuti den shadow treen – stycken i huvuddokumentet påverkas inte, och stilar från huvuddokumentet når inte in i shadow tree.
Varför inkapsling är viktigt
Inkapsling eliminerar problemet med global CSS som har plågat stora applikationer i årtionden. En komponents stilar kan inte oavsiktligt skrivas över av webbplatsens CSS, och komponenten kan inte av misstag förstöra webbplatsen. Gränsen definieras av specifikationen, inte av en konvention.
Pseudoklassen :host
Styla host-elementet med :host inifrån shadow tree. Använd :host(selector) för att begränsa utifrån en selector: :host([open]) { display: block; } matchar host-elementet endast när attributet open finns.
Ärvda egenskaper passerar fortfarande
Ärvda CSS-egenskaper (color, font-family, line-height) passerar fortfarande shadow-gränsen genom arv. Om dokumentet anger body { color: blue } blir texten i shadow tree också blå, såvida shadow tree inte uttryckligen skriver över färgen. Detta är en funktion: typografiska standardvärden förblir konsekventa.
CSS custom properties passerar gränsen
Custom properties (CSS-variabler) ärvs genom shadow roots, vilket gör dem till det vedertagna sättet att exponera en komponents API för tematisering: deklarera --card-bg: var(--surface, white) inuti shadow tree och låt användare skriva över --surface på host-elementet.
/* Shadow */
:host {
background: var(--card-bg, white);
}
/* Page */
my-card {
--card-bg: #f3f4f6;
}::part för extern styling
Märk ett element inuti shadow tree med part="name", så kan användare styla det med my-card::part(name) { ... }. Använd parts som enskilda stylingkrokar samtidigt som huvuddelen av shadow tree förblir inkapslad.
Adopterade stilmallar
shadowRoot.adoptedStyleSheets = [sheet] delar ett CSSStyleSheet-objekt mellan många shadow roots, vilket undviker upprepad parsning av <style>. Skapa stilmallar med new CSSStyleSheet() och sheet.replaceSync(cssText). Det ger stora prestandavinster i designsystem.
Deklarationernas ordning
Placera <style>-taggar allra först i shadow tree:s innerHTML så att stilarna parsas innan resten av DOM byggs. Det undviker den korta blinkning av ostylat innehåll som uppstår om stilarna kommer sent i parsordningen.
:host-context för regler baserade på överordnade element
:host-context(.dark-mode) :host stylar host-elementet utifrån en selector för ett överordnat element utanför shadow tree. Det är användbart för att tematisera komponenter utifrån en klass på en överordnad wrapper. Webbläsarstödet är bra, men kontrollera det i er målmatris.
Global återställning stannar utanför
CSS-återställningar som gäller hela dokumentet (marginaler på body, box-sizing) påverkar inte shadow trees. Tillämpa nödvändiga återställningar igen inuti varje shadow root, eller dela dem via en konstruerad stilmall som adopteras av varje komponent.
Felsöka Shadow DOM-stilar
Chrome DevTools visar shadow roots i panelen Elements under "#shadow-root (open)". Ni kan inspektera, redigera och aktivera eller inaktivera shadow-stilar precis som annan CSS, inklusive pseudoklassen :host och ::part-regler.
Kunskapskontroll
Varför är CSS custom properties (variabler) det rekommenderade sättet att tematisera en Shadow DOM-komponent?
Sammanfattning
Shadow DOM kapslar in stilar i båda riktningarna. Styla host-elementet med :host, exponera krokar för tematisering via ärvda CSS custom properties, exponera enskilda element för styling med ::part, dela stilmallar med adoptedStyleSheets och tillämpa återställningar igen inuti varje shadow root, eftersom CSS som gäller hela dokumentet inte passerar gränsen.
Lär dig HTML med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 40
- Lektioner
- 159
Vanliga frågor
Är lektionen ”Omfattningsbegränsade stilar i Shadow DOM” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen HTML Academy, inklusive ”Omfattningsbegränsade stilar i Shadow DOM”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i HTML Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Omfattningsbegränsade stilar i Shadow DOM”?
Skriv CSS som endast påverkar element i skuggträdet Ni övar på HTML Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig HTML Academy?
Du behöver inga förkunskaper. Utbildningen i HTML Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 4.
Hur lång tid tar lektionen ”Omfattningsbegränsade stilar i Shadow DOM”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här HTML Academy-lektionen?
Ja. Varje HTML Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- attachShadow och Shadow Root
- Slot-element för innehållsdistribution
- Omfattningsbegränsade stilar i Shadow DOM
- Part och exportparts för extern formatering