Om du vill återställa ett avsnitt på en sida som du har skapat kan du använda en riktad CSS-återställning för kontrollerad markup, Shadow DOM för avgränsade komponentstilar eller en iframe för ett separat dokument. Den här guiden visar hur du väljer och förhandsgranskar resultatet på en Mac.

Vilken typ av återställning behöver avsnittet?

Läsarens uppgift är konkret: ge en nästlad förhandsgranskningspanel egen typografi, egna avstånd och abstrakta bilder samtidigt som sidans utseende runtom bevaras. Du behöver tillgång till sidans källfiler och behörighet att redigera dem.

Välj gränsen innan du väljer återställningsdeklaration. CSS-egenskapers värden, selektorers räckvidd och dokumentresurser är olika saker. Följande beslutsstöd sammanför det dokumenterade beteendet hos CSS-återställningar, Shadow DOM och inline-ramar.

Ditt krav Praktiskt val Villkor att tänka på
Ta bort utvalda stilar från vanlig nästlad markup Riktade deklarationer eller all Selektorer utanför avsnittet kan fortfarande matcha dess element.
Hålla interna selektorer åtskilda från sidans selektorer Shadow DOM med en uttrycklig intern grundstil Nedärvda värden behöver fortfarande hanteras.
Ge avsnittet ett eget dokument och en egen stilmallskonfiguration En iframe Mått och resurser behöver konfigureras separat.

För en liten förhandsgranskningspanel som du själv har skapat är Shadow DOM en användbar utgångspunkt. Det ger en selektorgräns utan att kräva en andra HTML-fil. Om du bara behöver ta bort en kantlinje eller ändra teckensnittet på en rubrik är uttryckliga deklarationer enklare än att införa en komponentgräns.

Varför återställer inte all: revert ett nästlat avsnitt helt?

Kortformen all ändrar egenskaper på de element den matchar. Den utesluter anpassade egenskaper, direction och unicode-bidi. Den skapar inte ett separat dokument och hindrar inte andra selektorer från att matcha elementen. MDN:s referens för all

Återställningsnyckelorden ger också olika grundvärden. initial använder varje egenskaps startvärde enligt specifikationen. unset ärver egenskaper som normalt ärvs och initierar övriga. I en författarstilmall återställer revert den berörda egenskapen förbi författarstilar; nedärvda värden kan fortfarande komma från den överordnade delen. CSS Cascading and Inheritance Level 5

Om du till exempel återställer färgen på ett avsnitt tar det inte bort en färgdeklaration som direkt matchar ett stycke inuti avsnittet. MDN visar just den här skillnaden: stycket behåller sin direkt tilldelade färg även när den överordnade delen använder revert. En återställning på en omslutande behållare räcker därför inte när oönskat utseende kommer från selektorer för underordnade element. MDN:s exempel på återställning av överordnat element

Om du tillämpar en återställning på alla underordnade element blir räckvidden större, men du tar också bort användbar layout och formatering. Med all: initial försvinner till och med webbläsarens vanliga blockvisning för ett div-element, om du inte återställer den. Använd en sådan återställning bara när du medvetet kan bygga upp den presentation som behövs igen. Specifikationens exempel på återställning av widget

revert-layer har ett annat syfte: att återställa en egenskap genom kaskadlager. Det är användbart när problemet gäller ett visst lager av stilar, men skapar ingen komponentgräns. Återställning genom CSS-kaskadlager

Skapa en fristående förhandsgranskningspanel på din Mac

Det här kompletta exemplet skapar ett mörkt gränssnitt runtom och en ljus nästlad panel med syntetiska etiketter och två ursprungliga CSS-former. Allt är infogat direkt: inga hämtningar, paket, externa teckensnitt eller bildfiler behövs.

I TextEdit väljer du File > New och sedan Format > Make Plain Text. Klistra in hela exemplet nedan, spara det som section-reset.html och välj Use .html om du får frågan. Det här är Apples dokumenterade steg för att skapa en HTML-fil. Arbeta med HTML-dokument i TextEdit på 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>

Öppna den sparade filen i webbläsaren på din Mac. Det förväntade resultatet är en ljus panel med en rubrik med blandade versaler och gemener samt ett stycke utan kantlinje. Utanför panelen förblir rubriken versal och blå, och styckena behåller sina vänstra kantlinjer. Det här är förväntade resultat från exemplet, inte rapporterade mätningar från webbläsartester.

Skriptet kopplar en shadow root till värdelementet, som annars är tomt, och skapar panelen inuti den roten. Stilmallen hör till shadow-trädet, så vanliga selektorer för rubriker och stycken gäller internt. Dokumentets vanliga selektorer för rubriker och stycken når inte dessa interna element. Detta följer MDN:s dokumenterade mönster för formatering med Shadow DOM.

Den interna .panel ger lösningens andra del: en uttrycklig grundstil. Shadow-gränser skiljer åt selektormatchning, medan arv fortfarande fungerar genom elementträdet som återges. Genom att återställa den interna omslutande behållaren hindrar du omgivningens seriffteckensnitt och bokstavsavstånd från att bli dess vanliga nedärvda grundstil. Den aktuella CSS Shadow-specifikationen beskriver denna arvmodell; den är fortfarande ett utkast från redaktören. CSS Shadow Module Level 1

Vad passerar genom eller påverkar fortfarande gränsen?

Värdelementet förblir ett element i det omgivande dokumentet. Sidregler kan ändra dess marginal, bredd eller visning, och ett överordnat element bestämmer fortfarande hur mycket utrymme panelen får. Låt sidans stilmall styra värdelementets placering och shadow-stilmallen styra panelens interna utseende. Denna uppdelning följer den dokumenterade skillnaden mellan en shadow host och dess interna träd. Guide till CSS-avgränsning

Anpassade egenskaper kräver också ett genomtänkt avtal. all rensar inte bort dem. Exemplet använder inte ärvda anpassade egenskaper, så en extern variabel kan inte ändra de valda färgerna via en referens till var(). Om du senare lägger till temavariabler bör du ange vilka namn komponenten godtar och definiera interna standardvärden. MDN:s undantag från återställningen

Lägg nytt panelinnehåll i shadow-roten om du vill behålla samma selektorgräns. Innehåll som förs in via slotar har andra formateringsrelationer eftersom det kommer från det vanliga trädet; om du lägger till slotar ändras förutsättningarna för det här exemplet. CSS Shadows förklaring av slotar och trädrelationer

Shadow DOM är inte heller ett kommando för att återställa resurser. Exemplet undviker helt beroenden till resurser. Om kravet är ett separat HTML-dokument med egna referenser till stilmallar använder du rammetoden nedan.

När bör du använda en iframe i stället?

En iframe bäddar in ett annat dokument. Det gör den lämplig för en fristående förhandsgranskning med en dokumentkonfiguration som ska vara separat från den omgivande sidan. HTML-standarden definierar src för en refererad resurs och srcdoc för ett infogat dokument. HTML-standarden: iframe-elementet

Om du vill ha en lokal lösning med två filer skapar du en andra, komplett HTML-fil som heter panel.html och innehåller panelen och dess stilmall. Ersätt värdelementet och skriptet med en iframe som hänvisar till den filen. Följande är ett kodfragment för integration, inte ett fristående dokument:

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

Filnamnen här är lokala exempel. Skapa den andra filen innan du använder kodfragmentet. Den yttre storleken på ramen hör till den omslutande sidan; den inbäddade sidan står för sin interna presentation. Se 280px som en ungefärlig starthöjd och kontrollera längre innehåll i stället för att anta att det får plats.

Om du i stället väljer srcdoc bör du komma ihåg att relativa resursadresser löses i förhållande till den inbäddande sidans URL. Innehåll i ett infogat dokument får alltså inte automatiskt en separat basadress för resurser. MDN dokumenterar också att srcdoc, som inte stöds, faller tillbaka på src. MDN:s referens för iframe-attribut

Kontrollera kompatibilitet och felsök oväntad formatering

MDN anger att både grundläggande attachShadow() och egenskapen all har haft brett stöd i webbläsare sedan januari 2020. Det garanterar inte stöd för alla nyare alternativ inom funktionerna. Exemplet använder grundläget open och visar ett synligt reservmeddelande om Shadow DOM inte är tillgängligt. MDN: attachShadow(), MDN: all

@scope är ett annat sätt med stöd i webbläsare för att begränsa var en uppsättning selektorer gäller, men det stoppar inte arv och hindrar inte orelaterade globala regler från att nå underträdet. MDN anger att funktionen har haft stöd i aktuella webbläsare sedan mars 2026, men att äldre webbläsare har begränsningar. Använd den när det räcker att organisera selektorerna; behåll Shadow DOM eller en ram när du behöver deras respektive gränser. MDN: @scope

Följ den här felsökningsordningen när du har redigerat exemplet:

  1. Om filen visar källtext kontrollerar du att filändelsen är .html och öppnar den i webbläsaren.
  2. Om reservmeddelandet visas kontrollerar du att JavaScript körs och att webbläsaren stöder attachShadow().
  3. Om panelen ser fel ut kontrollerar du att innehållet har lagts till i shadow-roten och granskar sedan dess interna grundstil och stilmall.
  4. Om gränssnittet runtom ändras granskar du ändringar i dokumentets stilmall och reglerna för värdelementet.
  5. Om innehållet inte längre får plats kontrollerar du måtten för värdelementet eller ramen innan du ändrar typografin.

Välj den minsta gräns som uppfyller uppgiften: riktad CSS för en kontrollerad korrigering, Shadow DOM plus en definierad grundstil för en avgränsad panel eller en iframe för ett separat dokument. Ange placering, intern formatering och resursreferenser tydligt så att avsnittet kan ändras utan att omgivningen behöver göras om.

Källor