To reset one section of a page you author, use a targeted CSS reset for controlled markup, Shadow DOM for contained component styles, or an iframe for a separate document. This guide shows how to choose and preview the result on a Mac.

Which kind of reset does your section need?

The reader task here is specific: give a nested preview panel its own typography, spacing and abstract graphics while preserving the surrounding page’s appearance. You need access to the page’s source files and permission to edit them.

Choose the boundary before choosing the reset declaration. CSS property values, selector reach and document resources are different concerns. The following decision aid combines the documented behavior of CSS resets, Shadow DOM and inline frames.

Your requirement Practical choice Condition to retain
Remove selected styling from ordinary nested markup Targeted declarations or all Outside selectors can still match the section’s elements.
Keep internal selectors separate from page selectors Shadow DOM with an explicit internal baseline Inherited values still need attention.
Give the section its own document and stylesheet setup An iframe Its dimensions and resources need separate configuration.

For a small authored preview panel, Shadow DOM is a useful starting point. It provides a selector boundary without requiring a second HTML file. If you only need to remove a border or change a heading font, explicit declarations are simpler than introducing a component boundary.

Why doesn’t all: revert fully reset a nested section?

The all shorthand changes properties on the elements it matches. It excludes custom properties, direction and unicode-bidi. It does not create a separate document or stop other selectors from matching those elements. MDN’s all reference

The reset keywords also produce different baselines. initial uses each property’s specification-defined initial value. unset inherits properties that normally inherit and initializes the others. In an author stylesheet, revert rolls the affected property back beyond author styling; inherited values can still come from the parent. CSS Cascading and Inheritance Level 5

For example, resetting a section’s color does not remove a color declaration that directly matches a paragraph inside it. MDN demonstrates this exact distinction: the paragraph retains its directly assigned color even when the parent uses revert. A reset on a wrapper is therefore insufficient when descendant selectors are the source of the unwanted appearance. MDN’s parent-reset example

Applying a reset to every descendant expands its reach, but also removes useful layout and formatting. With all: initial, even the browser’s usual block display for a division element is lost unless you restore it. Use such a reset only when you can rebuild the required presentation deliberately. The specification’s widget-reset example

revert-layer serves another purpose: rolling a property back through cascade layers. It is useful when the problem is a particular layer of styles, but it does not establish a component boundary. CSS cascade-layer rollback

Build a self-contained preview panel on your Mac

This complete example creates a dark surrounding interface and a light nested panel containing synthetic labels and two original CSS shapes. Everything is inline: no downloads, packages, external fonts or image files are required.

In TextEdit, choose File > New, then Format > Make Plain Text. Paste the complete example below, save it as section-reset.html, and choose Use .html if prompted. These are Apple’s documented steps for creating an HTML file. Work with HTML documents in TextEdit on 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 the saved file in your Mac browser. The intended result is a light panel with a mixed-case heading and an unbordered paragraph. Outside it, the heading remains uppercase and blue, and the paragraphs retain their left borders. These are expected results from the example, not reported browser-test measurements.

The script attaches a shadow root to the empty-purpose host and creates the panel inside that root. Its stylesheet belongs to the shadow tree, so its ordinary heading and paragraph selectors apply internally. The document’s ordinary heading and paragraph selectors do not reach those internal elements. This follows MDN’s documented Shadow DOM styling pattern.

The internal .panel provides the second part of the solution: an explicit baseline. Shadow boundaries separate selector matching, while inheritance still operates through the rendered element tree. Resetting the internal wrapper prevents the surrounding serif font and letter spacing from becoming its ordinary inherited baseline. The current CSS Shadow specification describes that inheritance model; it remains an editor’s draft. CSS Shadow Module Level 1

What still crosses or affects the boundary?

The host remains an element of the surrounding document. Page rules can change its margin, width or display, and an ancestor still determines how much space the panel receives. Keep the host’s placement under the page stylesheet and the panel’s internal appearance under its shadow stylesheet. This division follows the documented distinction between a shadow host and its internal tree. CSS scoping guide

Custom properties also require a deliberate contract. all does not clear them. This example avoids consuming inherited custom properties, so an outside variable cannot change its chosen colors through a var() reference. If you later introduce theme variables, define which names the component accepts and provide internal defaults. MDN’s reset exclusions

Keep new panel content inside the shadow root when you want the same selector boundary. Slotted content has different styling relationships because it originates in the light tree; adding slots changes the assumptions of this example. CSS Shadow’s explanation of slots and tree relationships

Shadow DOM is also not a resource-reset command. The example avoids resource dependencies entirely. If the required contract is a separate HTML document with its own stylesheet references, use the frame approach below.

When should you use an iframe instead?

An iframe embeds another document. That makes it appropriate for an independently styled preview whose document setup should be separate from the surrounding page. The HTML Standard defines src for a referenced resource and srcdoc for an inline document. HTML Standard: the iframe element

For a local two-file arrangement, create a second complete HTML file called panel.html containing the panel and its stylesheet. Replace the host and its script with an iframe referencing that file. The following is an integration fragment, not a standalone document:

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

The filenames here are local example filenames. Supply the actual second file before using the fragment. The frame’s outer size belongs to the containing page; the embedded page supplies its internal presentation. Treat 280px as an illustrative starting height and check longer content rather than assuming it will fit.

If you choose srcdoc instead, remember that relative resource URLs resolve against the embedding page’s URL. Inline document content therefore does not automatically get an independent resource base. MDN also documents that unsupported srcdoc falls back to src. MDN’s iframe attribute reference

Check compatibility and diagnose unexpected styling

MDN marks both basic attachShadow() and the all property as widely available across browsers since January 2020. That does not guarantee every newer option on those features. This example uses the basic open mode and retains a visible fallback message when Shadow DOM is unavailable. MDN: attachShadow(), MDN: all

@scope is another supported way to limit where a set of selectors applies, but it does not stop inheritance or prevent unrelated global rules from entering the subtree. MDN identifies it as newly available across current browsers since March 2026, with older-browser limits. Use it when selector organization satisfies the requirement; retain Shadow DOM or a frame when you need their respective boundaries. MDN: @scope

Use this diagnostic sequence after editing the example:

  1. If the file shows source text, confirm that its saved extension is .html and open it in the browser.
  2. If the fallback message remains, confirm that JavaScript runs and that the browser supports attachShadow().
  3. If the panel looks wrong, confirm its content was appended to the shadow root, then inspect its internal baseline and stylesheet.
  4. If the surrounding interface changes, inspect edits to the document stylesheet and host rules.
  5. If content no longer fits, check host or frame dimensions before changing typography.

Choose the smallest boundary that meets the task: targeted CSS for a controlled correction, Shadow DOM plus a defined baseline for a contained panel, or an iframe for a separate document. Keep placement, internal styling and resource references explicit so the section can change without requiring a redesign of its surroundings.

Sources