Gebruik voor een reset van één sectie van een pagina die je zelf beheert een gerichte CSS-reset voor beheerde markup, Shadow DOM voor afgeschermde componentstijlen of een iframe voor een afzonderlijk document. In deze handleiding lees je hoe je een keuze maakt en het resultaat bekijkt op een Mac.

Welk type reset heeft je sectie nodig?

De taak van de lezer is hier specifiek: geef een genest voorbeeldvenster een eigen typografie, tussenruimte en abstracte afbeeldingen, terwijl het uiterlijk van de omringende pagina behouden blijft. Je hebt toegang nodig tot de bronbestanden van de pagina en toestemming om ze te bewerken.

Kies de grens voordat je de resetdeclaratie kiest. CSS-eigenschapswaarden, het bereik van selectors en documentbronnen zijn verschillende zaken. De volgende besliswijzer combineert het gedocumenteerde gedrag van CSS-resets, Shadow DOM en inline frames.

Je vereiste Praktische keuze Voorwaarde om rekening mee te houden
Geselecteerde stijlen verwijderen uit gewone geneste markup Gerichte declaraties of all Selectors van buitenaf kunnen nog steeds overeenkomen met de elementen in de sectie.
Interne selectors gescheiden houden van paginaselectors Shadow DOM met een expliciete interne basisstijl Overgeërfde waarden vereisen nog aandacht.
De sectie een eigen document en stylesheetconfiguratie geven Een iframe De afmetingen en bronnen moeten afzonderlijk worden ingesteld.

Voor een klein voorbeeldvenster dat je zelf beheert, is Shadow DOM een nuttig uitgangspunt. Het biedt een grens voor selectors zonder dat je een tweede HTML-bestand nodig hebt. Als je alleen een rand wilt verwijderen of het lettertype van een kop wilt wijzigen, zijn expliciete declaraties eenvoudiger dan een componentgrens introduceren.

Waarom reset all: revert een geneste sectie niet volledig?

De verkorte notatie all wijzigt eigenschappen van de elementen waarop deze van toepassing is. Aangepaste eigenschappen, direction en unicode-bidi zijn uitgezonderd. De notatie maakt geen afzonderlijk document en voorkomt niet dat andere selectors overeenkomen met die elementen. De MDN-verwijzing voor all

De reset-keywords leveren ook verschillende basisstijlen op. initial gebruikt de beginwaarde die voor elke eigenschap in de specificatie is vastgelegd. unset laat eigenschappen die normaal worden overgeërfd overerven en initialiseert de overige. In een auteursstylesheet zet revert de betrokken eigenschap terug voorbij de auteursstijlen; overgeërfde waarden kunnen nog steeds van de bovenliggende elementen komen. CSS Cascading and Inheritance Level 5

Een reset van de kleur van een sectie verwijdert bijvoorbeeld geen kleurdeclaratie die rechtstreeks overeenkomt met een alinea erin. MDN laat precies dit onderscheid zien: de alinea behoudt de rechtstreeks toegewezen kleur, zelfs wanneer de bovenliggende elementen revert gebruiken. Een reset op een wrapper volstaat daarom niet wanneer selectors voor afstammelingen de ongewenste weergave veroorzaken. Het voorbeeld van MDN met een reset op het bovenliggende element

Een reset toepassen op alle afstammelingen vergroot het bereik, maar verwijdert ook nuttige lay-out- en opmaakinstellingen. Met all: initial gaat zelfs de gebruikelijke blokweergave van de browser voor een div-element verloren, tenzij je die herstelt. Gebruik zo'n reset alleen als je de vereiste presentatie bewust opnieuw kunt opbouwen. Het voorbeeld van de specificatie voor een widget-reset

revert-layer dient een ander doel: een eigenschap terugzetten door de cascade-lagen heen. Dit is nuttig wanneer het probleem in een bepaalde stijlenlaag zit, maar het creëert geen componentgrens. Een cascade-laag terugzetten in CSS

Maak een op zichzelf staand voorbeeldvenster op je Mac

Dit volledige voorbeeld maakt een donkere omringende interface en een licht genest venster met synthetische labels en twee oorspronkelijk gemaakte CSS-vormen. Alles staat inline: er zijn geen downloads, pakketten, externe lettertypen of afbeeldingsbestanden nodig.

Kies in Teksteditor Archief > Nieuw en daarna Opmaak > Maak platte tekst. Plak het volledige voorbeeld hieronder, sla het op als section-reset.html en kies desgevraagd Gebruik .html. Dit zijn de door Apple gedocumenteerde stappen voor het maken van een HTML-bestand. Werken met HTML-documenten in Teksteditor op de Mac

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Section reset demonstration</title>
  <style>
    body {
      margin: 0;
      padding: 32px;
      background: #202a36;
      color: #f2f5f8;
      font: 18px/1.6 Georgia, serif;
      letter-spacing: 1px;
    }
    main { max-width: 720px; margin: auto; }
    h2 { color: #bce8ff; text-transform: uppercase; }
    p { border-left: 4px solid #7db5cf; padding-left: 12px; }
    #panel-host { display: block; margin: 24px 0; }
  </style>
</head>
<body>
  <main>
    <h1>Shape workspace</h1>
    <p>Outer label Alpha</p>
    <div id="panel-host">
      <p>Preview unavailable. Use a browser supporting Shadow DOM.</p>
    </div>
    <h2>Outer label Beta</h2>
    <p>This paragraph belongs to the surrounding interface.</p>
  </main>
  <script>
    const host = document.getElementById("panel-host");
    if (typeof host.attachShadow === "function") {
      const root = host.attachShadow({ mode: "open" });
      const style = document.createElement("style");
      style.textContent = `
        .panel {
          all: initial;
          display: block;
          box-sizing: border-box;
          direction: ltr;
          unicode-bidi: normal;
          font: 16px/1.5 system-ui, sans-serif;
          color: #233344;
          background: #f4f7fa;
          padding: 24px;
          border: 2px solid #9db0c1;
          border-radius: 12px;
        }
        h2 { margin: 0 0 12px; font-size: 22px; }
        p { margin: 0 0 16px; }
        .shapes { display: flex; gap: 16px; flex-wrap: wrap; }
        .circle {
          width: 56px; height: 56px;
          border-radius: 50%; background: #386f91;
        }
        .bar {
          width: 104px; height: 56px;
          border-radius: 8px; background: #c98252;
        }
      `;
      const panel = document.createElement("section");
      panel.className = "panel";
      const heading = document.createElement("h2");
      heading.textContent = "Panel Delta";
      const text = document.createElement("p");
      text.textContent = "Circle and rounded bar";
      const shapes = document.createElement("div");
      shapes.className = "shapes";
      shapes.setAttribute("aria-hidden", "true");
      for (const name of ["circle", "bar"]) {
        const shape = document.createElement("div");
        shape.className = name;
        shapes.append(shape);
      }
      panel.append(heading, text, shapes);
      root.append(style, panel);
    }
  </script>
</body>
</html>

Open het opgeslagen bestand in de browser op je Mac. Het verwachte resultaat is een licht venster met een kop in gemengde hoofd- en kleine letters en een alinea zonder rand. Daarbuiten blijft de kop blauw en volledig in hoofdletters, en behouden de alinea's hun linkerranden. Dit zijn verwachte resultaten van het voorbeeld, geen gerapporteerde metingen uit browsertests.

Het script koppelt een shadow root aan de host en maakt het venster daarin aan. De stylesheet hoort bij de shadow tree, dus gewone selectors voor koppen en alinea's zijn er intern op van toepassing. De gewone selectors voor koppen en alinea's in het document bereiken deze interne elementen niet. Dit volgt het door MDN gedocumenteerde stijlpatroon voor Shadow DOM.

De interne .panel levert het tweede deel van de oplossing: een expliciete basisstijl. Shadow-grenzen scheiden het matchen van selectors, terwijl overerving nog steeds plaatsvindt via de gerenderde elementstructuur. Door de interne wrapper te resetten voorkom je dat het omliggende schreeflettertype en de letterafstand de normale geërfde basisstijl worden. De huidige CSS Shadow-specificatie beschrijft dit overervingsmodel; het is nog een concept van de redacteur. CSS Shadow Module Level 1

Wat passeert de grens of heeft er invloed op?

De host blijft een element van het omringende document. Paginaregels kunnen de marge, breedte of weergave ervan wijzigen, en een voorouder bepaalt nog steeds hoeveel ruimte het venster krijgt. Laat de stylesheet van de pagina de plaatsing van de host regelen en de shadow-stylesheet het interne uiterlijk van het venster. Deze verdeling volgt het gedocumenteerde onderscheid tussen een shadow host en de interne tree ervan. Handleiding voor CSS-scoping

Ook aangepaste eigenschappen vereisen een bewust contract. all wist ze niet. Dit voorbeeld gebruikt geen overgeërfde aangepaste eigenschappen, zodat een variabele van buitenaf de gekozen kleuren niet kan wijzigen via een verwijzing met var(). Als je later thema-variabelen toevoegt, bepaal dan welke namen de component accepteert en geef ze interne standaardwaarden. De uitzonderingen op de reset van MDN

Houd nieuwe inhoud van het venster binnen de shadow root als je dezelfde selectorgrens wilt behouden. Inhoud via slots heeft andere stijlrelaties omdat die afkomstig is uit de light tree; slots toevoegen verandert de aannames van dit voorbeeld. De uitleg van CSS Shadow over slots en tree-relaties

Shadow DOM is ook geen opdracht om bronnen te resetten. Het voorbeeld vermijdt afhankelijkheden van bronnen helemaal. Als je een afzonderlijk HTML-document met eigen stylesheetverwijzingen nodig hebt, gebruik dan de iframe-aanpak hieronder.

Wanneer gebruik je beter een iframe?

Een iframe voegt een ander document in. Dat maakt het geschikt voor een zelfstandig opgemaakte voorbeeldweergave waarvan de documentconfiguratie gescheiden moet zijn van de omringende pagina. De HTML-standaard definieert src voor een verwijzing naar een bron en srcdoc voor een inline document. HTML-standaard: het iframe-element

Maak voor een lokale opstelling met twee bestanden een tweede, volledig HTML-bestand met de naam panel.html, dat het venster en de stylesheet bevat. Vervang de host en het bijbehorende script door een iframe dat naar dat bestand verwijst. Hieronder staat een integratiefragment, geen zelfstandig document:

<iframe
  title="Shape panel preview"
  src="panel.html"
  style="display:block;width:100%;height:280px;border:0">
</iframe>

De bestandsnamen hier zijn lokale voorbeeldnamen. Zorg dat het tweede bestand aanwezig is voordat je het fragment gebruikt. De buitenafmetingen van het frame horen bij de omringende pagina; de ingesloten pagina bepaalt de interne presentatie. Beschouw 280px als een illustratieve beginhoogte en controleer langere inhoud in plaats van ervan uit te gaan dat die past.

Als je in plaats daarvan srcdoc kiest, houd er dan rekening mee dat relatieve bron-URL's worden opgelost ten opzichte van de URL van de insluitende pagina. Inhoud van een inline document krijgt dus niet automatisch een onafhankelijke basis-URL voor bronnen. MDN documenteert ook dat een niet-ondersteunde srcdoc terugvalt op src. MDN-verwijzing naar iframe-attributen

Controleer de compatibiliteit en onderzoek onverwachte stijlen

MDN vermeldt dat zowel de basisfunctie attachShadow() als de eigenschap all breed beschikbaar zijn in browsers sinds januari 2020. Dat garandeert niet dat elke nieuwere optie voor die functies beschikbaar is. Dit voorbeeld gebruikt de basismodus open en behoudt een zichtbare terugvalmelding wanneer Shadow DOM niet beschikbaar is. MDN: attachShadow(), MDN: all

@scope is een andere ondersteunde manier om te beperken waar een set selectors van toepassing is, maar deze stopt overerving niet en voorkomt niet dat niet-gerelateerde globale regels de subboom bereiken. MDN vermeldt dat de functie sinds maart 2026 nieuw beschikbaar is in actuele browsers, met beperkingen in oudere browsers. Gebruik deze functie wanneer een goede ordening van selectors aan de vereisten voldoet; behoud Shadow DOM of een frame wanneer je hun respectieve grenzen nodig hebt. MDN: @scope

Volg deze diagnostische stappen nadat je het voorbeeld hebt bewerkt:

  1. Als het bestand brontekst toont, controleer dan of de opgeslagen extensie .html is en open het in de browser.
  2. Als de terugvalmelding blijft staan, controleer dan of JavaScript wordt uitgevoerd en of de browser attachShadow() ondersteunt.
  3. Als het venster er niet goed uitziet, controleer dan of de inhoud aan de shadow root is toegevoegd en bekijk daarna de interne basisstijl en stylesheet.
  4. Als de omringende interface verandert, inspecteer dan de wijzigingen aan de documentstylesheet en de hostregels.
  5. Als de inhoud niet meer past, controleer dan de afmetingen van de host of het frame voordat je de typografie wijzigt.

Kies de kleinste grens die aan de taak voldoet: gerichte CSS voor een gecontroleerde aanpassing, Shadow DOM met een gedefinieerde basisstijl voor een afgeschermd venster, of een iframe voor een afzonderlijk document. Leg de plaatsing, interne stijlen en bronverwijzingen expliciet vast, zodat de sectie kan veranderen zonder dat de omliggende inhoud opnieuw ontworpen hoeft te worden.

Bronnen