Part en exportparts voor externe styling
Maak onderdelen van de shadow DOM beschikbaar voor externe CSS met part en exportparts
Part en exportparts voor externe styling is een gratis HTML Academy-les op CoddyKit. Dit is les 4 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject HTML Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus HTML Academy bevat in totaal 4 lessen.
De afweging bij inkapseling
De strikte stijl-inkapseling van Shadow DOM voorkomt dat gebruikers afzonderlijke elementen binnen een component opnieuw stijlen. CSS-variabelen werken voor globale eigenschappen, maar je kunt bijvoorbeeld de interne "close"-knop geen aangepaste border-radius geven. Parts lossen dit op.
Het part-attribuut
Markeer een element binnen de shadow met part="name". Gebruikers kunnen het vervolgens selecteren met het ::part(name)-pseudoelement: my-dialog::part(close-button) { color: red; }. Het element met die naam wordt een stijlhaak, terwijl de rest van de shadow ingekapseld blijft.
// Shadow tree:
<button part="close-button">×</button>
// Page CSS:
my-dialog::part(close-button) {
color: red;
border-radius: 50%;
}Meerdere parts op één element
Scheid namen met spaties om één element als meerdere parts beschikbaar te maken: part="button primary". ::part(button) selecteert het op algemene wijze, terwijl ::part(primary) het selecteert als een element met primaire stijl. Elke naam wordt afzonderlijk gekoppeld.
Beperkingen van ::part
::part staat slechts bepaalde pseudoklassen toe, zoals :hover, :focus en :disabled — geen afstammingscombinatoren of verdere structurele selectie. ::part(card) p is ongeldig; je kunt niet met afstammingsselectors binnen een part komen.
exportparts stuurt parts door
Wanneer een aangepast element binnen zijn eigen shadow een ander aangepast element bevat, worden de parts van het binnenste element normaal gesproken niet beschikbaar gemaakt aan de buitenste pagina. exportparts="close-button" op het geneste element stuurt die parts door naar de buitenste host.
// Outer shadow:
<inner-element exportparts="close-button"></inner-element>
// Page:
outer-element::part(close-button) { color: red; }Namen wijzigen bij exporteren
exportparts="close-button: dismiss" exporteert de interne part onder een nieuwe naam op het buitenste element. Zo kan de buitenste component een duidelijke naamgevingslaag bieden die onafhankelijk is van de interne elementen die de component combineert.
Parts tegenover aangepaste CSS-eigenschappen
Aangepaste CSS-eigenschappen bieden waarden aan, zoals kleur, tussenruimte en lettertypen. Parts bieden elementen aan, met volledige CSS-mogelijkheden voor randen, transformaties en animaties. Gebruik aangepaste eigenschappen voor globale tokens en parts voor eenmalige aanpassingen op elementniveau. Beide kunnen naast elkaar in dezelfde component bestaan.
Patroon voor thematisering
Praktijk in ontwerpsystemen: bied een klein oppervlak van parts aan voor de elementen die het vaakst worden aangepast, zoals knoppen, kopteksten en indicatoren, plus een ruime verzameling aangepaste eigenschappen voor kleur, tussenruimte en typografie. Gebruikers kunnen thematiseren op waarde- of elementniveau, afhankelijk van hun behoefte.
Stabiliteit van partnamen
Partnamen worden onderdeel van de openbare API van de component — als je ze wijzigt, breek je de CSS van gebruikers. Kies namen die de rol van het element beschrijven, zoals "close-button", "header" en "track", in plaats van de positie, zoals "first-button", zodat de API betekenisvol blijft terwijl de implementatie verandert.
Tips voor documentatie
Vermeld alle beschikbare en geëxporteerde parts in het readme van de component. Zonder documentatie moeten gebruikers de DOM inspecteren om parts te ontdekken, waardoor ze gekoppeld raken aan wat ze toevallig aantreffen. Behandel de partlijst als de lijst met eigenschappen van een frameworkcomponent.
Browserondersteuning
::part en exportparts zijn beschikbaar in alle moderne browsers. Zelfs oudere versies van Safari ondersteunen ::part inmiddels. Gebruik ze zonder bezwaar; voor zeer oude browsers, die grotendeels niet meer in gebruik zijn, kun je als alternatief extra aangepaste CSS-eigenschappen gebruiken.
Kenniscontrole
Wat doet het exportparts-attribuut?
Samenvatting
Het part-attribuut maakt afzonderlijke elementen in de shadow beschikbaar voor externe stijling via ::part(name) — met alle CSS-mogelijkheden zonder de inkapseling te verbreken. exportparts stuurt parts van geneste aangepaste elementen door naar de buitenste host en kan ze daarbij een andere naam geven. Combineer parts met aangepaste CSS-eigenschappen voor een complete thematiseringslaag en documenteer de partlijst als onderdeel van de API van de component.
Leer HTML met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 40
- Lessen
- 159
Veelgestelde vragen
Is de les “Part en exportparts voor externe styling” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad HTML Academy, waaronder “Part en exportparts voor externe styling”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus HTML Academy bevat in totaal 4 lessen.
Wat leer ik in “Part en exportparts voor externe styling”?
Maak onderdelen van de shadow DOM beschikbaar voor externe CSS met part en exportparts Je oefent met HTML Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met HTML Academy te beginnen?
Ervaring vooraf is niet nodig. HTML Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 4 van 4.
Hoe lang duurt de les “Part en exportparts voor externe styling”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over HTML Academy?
Ja. Elke les over HTML Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- attachShadow en Shadow Root
- Slot-elementen voor inhoudsdistributie
- Bereikgebonden stijlen in de Shadow DOM
- Part en exportparts voor externe styling