Aanpassing van semantische componenten

Gebruik stijlquery's (@container style()) om contextuele variaties te activeren zonder hardcoding van wat elke context produceert of erop reageert. Dit vermindert de koppeling van het ontwerpsysteem en verbetert de uitbreidbaarheid en componentinkapseling.

Een section.featured { --surface: featured }-regel kan bijvoorbeeld een context markeren en een landingspagina kan er ook standaard naar verwijzen via main { --surface: featured }. Componenten kunnen dan reageren op --surface: featured: een kaart toont een promotiebadge, een knop wordt standaard de gevulde variant, enzovoort.

Met stijlquery's kunnen beide kanten ontkoppeld blijven: de uitgelichte platforms noemen nooit de elementen die zich aanpassen en de componenten inspecteren nooit wat de context heeft geproduceerd. Beide kanten kunnen onafhankelijk van elkaar worden uitgebreid (nieuwe componenten, nieuwe uitgelichte platforms) zonder de andere kant te beïnvloeden. Afstammingskiezers (bijv. .featured .button) dwingen het tegenovergestelde af: de kiezer moet beide kanten van de relatie coderen en moet worden gewijzigd wanneer een van beide kanten wordt gewijzigd.

Wanneer je deze gids gebruikt

In deze gids worden gedragsveranderingen behandeld: een component die beslist wat er moet worden gerenderd, hoe deze zichzelf moet rangschikken of welke variant moet worden gepresenteerd als reactie op de context, zoals een badge verbergen of tonen, de richting van de vormgeving wijzigen of een knopvariant wisselen.

Als je wijzigingen op tokenniveau nodig hebt (dichtheidsmodi, thema's of andere tokens van een hogere orde die waarden zoals opvulling en kleur uniform verschuiven over veel componenten), ga je naar Design Token Reactivity.

De juiste tool kiezen

Gebruik een stijlquery als beide kanten van een contextuele relatie onafhankelijk van elkaar kunnen veranderen. Nieuwe elementen kunnen de context gaan produceren of nieuwe componenten kunnen erop gaan reageren. De indirectheid betaalt zichzelf terug in uitbreidbaarheid en inkapseling, en stijlquery's overschrijden schaduw-DOM-grenzen die afstammingsselectoren niet kunnen overschrijden. Als je die flexibiliteit niet nodig hebt, kun je beter de eenvoudigere tool gebruiken:

• Afstammingsselectors (.toolbar .button): een vaste, eenmalige relatie die niet herbruikbaar of uitbreidbaar is. YAGNI is van toepassing: voeg geen omleiding toe die je niet gaat gebruiken.
• Groottequery's (@container (min-width: …)): wijzigingen in de indeling en dichtheid op basis van de beschikbare ruimte, niet de semantische status.
• Stijlquery's (@container style(…)): semantische status: wat een component moet weergeven, rangschikken of presenteren in een bepaalde context.

Implementatierichtlijnen

1. Definieer een semantische contextvlag met een aangepaste CSS-eigenschap in een container.
2. Stel container-type NIET in voor stijlquery's. Deze voeren query's uit voor overgenomen aangepaste eigenschappen op de dichtstbijzijnde bovenliggende elementen en vereisen geen expliciete containmentcontext.
3. VERPLICHT: Gebruik @container style(--property: value) om voorwaardelijke stijlen toe te passen op onderliggende elementen. Stijlquery's kunnen niet overeenkomen met het element waarop de property is ingesteld, alleen met de onderliggende elementen.
4. GEEF de voorkeur aan stijlquery's boven afstammingskiezers als de relatie uitbreidbaar moet blijven of component-/shadow DOM-grenzen moet overschrijden (zie De juiste tool kiezen hierboven). Gebruik afstammingskiezers voor vaste, eenmalige relaties waarbij de indirectheid niets oplevert.

Voorbeeld van implementatie

/* 1. Set the context on a layout container */
.featured {
  --surface: featured; /* Semantic context flag for children */
}

/* 2. Component reacts to inherited flag */
.button {
  /* Default: Outlined informational style */
  background: transparent;
  border: 1px solid currentColor;
}

.badge {
  /* Default: Hidden — only revealed in featured surfaces */
  display: none;
}

@container style(--surface: featured) {
  .button {
    /* Automatic switch to Filled promotional style */
    background: var(--brand-accent);
    color: white;
    border: none;
  }

  .badge {
    /* Reveal decorative elements only in featured context */
    display: block;
  }
}

Reservestrategieën

Totdat containerstijlquery's overal beschikbaar zijn, kun je ze toevoegen als een progressive enhancement: lever een op een kiezer gebaseerde standaard die overal werkt en laat de stijlquery deze overschrijven als deze wordt ondersteund. Gebruik :where() in de contextkiezer, zodat de stijlquery (dezelfde specificiteit, later in de bronvolgorde) automatisch wint.

/* Default styles — work everywhere */
.button {
  background: transparent;
  border: 1px solid currentColor;
}

.badge {
  display: none;
}

/* Selector-based contextual styles — broad browser support */
:where(.featured) .button {
  background: var(--brand-accent);
  color: white;
  border: none;
}

:where(.featured) .badge {
  display: block;
}

/* Progressive enhancement: style queries override when supported */
@container style(--surface: featured) {
  .button {
    background: var(--brand-accent);
    color: white;
    border: none;
  }

  .badge {
    display: block;
  }
}

De selector-fallback koppelt de contextuele stijl aan een klassenaam, die de component koppelt aan de DOM-plaatsing. Zodra stijlquery's breed worden ondersteund, kan de regel :where() worden verwijderd.