HTML Academy · leksjon

Part og Exportparts for ekstern styling

Eksponer deler av Shadow DOM for ekstern CSS med part og exportparts

Leksjon 4 av 413 trinn

Part og Exportparts for ekstern styling er en gratis leksjon i HTML Academy på CoddyKit. Dette er leksjon 4 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 HTML Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i HTML Academy inneholder totalt 4 leksjoner.

Avveiningen ved innkapsling

Den strenge stilinnkapslingen i Shadow DOM hindrer brukere i å style individuelle elementer inne i en komponent på nytt. CSS-variabler fungerer for globale egenskaper, men du kan for eksempel ikke gi den interne "close"-knappen en egendefinert border-radius. Parts løser dette.

part-attributtet

Merk et element inne i shadow tree med part="name". Brukere kan deretter målrette det med pseudoelementet ::part(name): my-dialog::part(close-button) { color: red; }. Det navngitte elementet blir en stylingkrok, mens resten av shadow tree-et forblir innkapslet.

// Shadow tree:
<button part="close-button">×</button>
// Page CSS:
my-dialog::part(close-button) {
  color: red;
  border-radius: 50%;
}

Flere parts på ett element

Skill navn med mellomrom for å eksponere ett element som flere parts: part="button primary". ::part(button) målretter det generelt, mens ::part(primary) målretter det som et element med primærstil. Hvert navn samsvarer uavhengig av de andre.

Begrensninger for ::part

::part tillater bare enkelte pseudoklasser, som :hover, :focus og :disabled — ikke etterkommerkombinatorer eller ytterligere strukturell seleksjon. ::part(card) p er ugyldig; du kan ikke nå inn i en part med etterkommerselektorer.

exportparts videresender parts

Når et egendefinert element bygger inn et annet egendefinert element i sitt eget shadow tree, eksponeres delene til det indre elementet normalt ikke for siden utenfor. exportparts="close-button" på det nestede elementet videresender disse delene til det ytre vertselementet.

// Outer shadow:
<inner-element exportparts="close-button"></inner-element>
// Page:
outer-element::part(close-button) { color: red; }

Gi nytt navn ved eksport

exportparts="close-button: dismiss" eksporterer den indre parten med et nytt navn på det ytre elementet. Dette gjør at den ytre komponenten kan tilby et ryddig navnegrensesnitt, uavhengig av hvilke interne elementer den setter sammen.

parts kontra egendefinerte CSS-egenskaper

Egendefinerte CSS-egenskaper eksponerer verdier som farger, avstander og skrifter. Parts eksponerer elementer med alle CSS-muligheter, inkludert kantlinjer, transformasjoner og animasjoner. Bruk egendefinerte CSS-egenskaper for globale designverdier og parts for enkelttilpasning på elementnivå. Begge kan brukes på samme komponent.

Mønster for tematisering

Praksis i designsystemer: Eksponer et lite utvalg parts for elementene som oftest tilpasses, som knapper, overskrifter og indikatorer, samt et omfattende sett med egendefinerte CSS-egenskaper for farger, avstander og typografi. Brukere kan tematisere enten på verdinivå eller elementnivå, avhengig av behovet.

Stabilitet for part-navn

Part-navn blir en del av komponentens offentlige API — hvis de endres, brytes CSS-en til brukerne. Velg navn som beskriver elementets rolle, som "close-button", "header" og "track", i stedet for plasseringen, som "first-button", slik at API-et forblir meningsfullt når implementasjonen utvikler seg.

Dokumentasjonstips

List opp alle tilgjengelige parts, inkludert eksporterte parts, i komponentens readme. Uten dokumentasjon må brukere inspisere DOM-en for å oppdage parts, noe som kobler dem til det de tilfeldigvis finner. Behandle parts-listen som props-listen til en rammeverkskomponent.

Nettleserstøtte

::part og exportparts finnes i alle moderne nettlesere. Selv eldre Safari-versjoner støtter nå ::part. Bruk dem fritt; for svært gamle nettlesere, som stort sett ikke lenger brukes, kan du bruke flere egendefinerte CSS-egenskaper som en nødløsning.

Kunnskapssjekk

Hva gjør exportparts-attributtet?

Besvar den i den interaktive leksjonen

Sammendrag

part-attributtet eksponerer individuelle elementer i shadow tree for ekstern styling via ::part(name) — med alle CSS-muligheter uten å bryte innkapslingen. exportparts videresender parts fra nestede egendefinerte elementer til det ytre vertselementet, og kan eventuelt gi dem nye navn. Kombiner parts med egendefinerte CSS-egenskaper for et komplett tematiseringsgrensesnitt, og dokumenter part-listen som en del av komponentens API.

Gratis å komme i gang

Lær deg HTML 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: 40
Leksjoner: 159

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Part og Exportparts for ekstern styling» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien HTML Academy, inkludert «Part og Exportparts for ekstern styling», 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 HTML Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Part og Exportparts for ekstern styling»?

Eksponer deler av Shadow DOM for ekstern CSS med part og exportparts Du øver på HTML 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 HTML Academy?

Ingen tidligere erfaring er nødvendig. HTML 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 4 av 4.

Hvor lang tid tar leksjonen «Part og Exportparts for ekstern styling»?

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 HTML Academy-leksjonen?

Ja. Alle HTML 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 HTML Academy