若要重設你編寫的頁面中的某個區段，可對受控標記使用目標式 CSS 重設、對封裝的元件樣式使用 Shadow DOM，或使用 iframe 建立獨立文件。本指南說明如何選擇並在 Mac 上預覽結果。

你的區段需要哪種重設方式？

這裡的讀者任務很明確：讓巢狀預覽面板擁有自己的字體排印、間距和抽象圖形，同時保留周圍頁面的外觀。你需要能存取頁面的原始檔案，並獲准編輯這些檔案。

選擇重設宣告前，先決定界線。CSS 屬性值、選擇器作用範圍和文件資源是不同的問題。以下決策指南整合了 CSS 重設、Shadow DOM 和 內嵌框架 的文件說明行為。

你的需求 實用選擇 必須留意的條件
移除一般巢狀標記上指定的樣式 目標式宣告或 all 外部選擇器仍可能符合區段中的元素。
將內部選擇器與頁面選擇器分開 Shadow DOM 搭配明確的內部基準樣式 仍需留意繼承值。
讓區段擁有自己的文件和樣式表設定 iframe 需另外設定尺寸和資源。

對於自行編寫的小型預覽面板，Shadow DOM 是實用的起點。它提供選擇器界線，且不需要第二個 HTML 檔案。如果你只需要移除框線或更改標題字型，明確宣告會比引入元件界線更簡單。

為什麼 all: revert 無法完全重設巢狀區段？

all 簡寫會更改它所符合元素的屬性，但不包括自訂屬性、direction 和 unicode-bidi。它不會建立獨立文件，也不會阻止其他選擇器符合這些元素。MDN 的 all 參考資料

重設關鍵字也會產生不同的基準樣式。initial 使用規格定義的初始值設定各屬性。unset 會繼承通常會繼承的屬性，並將其他屬性設為初始值。在作者樣式表中，revert 會將受影響的屬性回退到作者樣式之前；繼承值仍可能來自父元素。CSS 層疊與繼承第 5 級

例如，重設區段的顏色不會移除直接符合區段內段落的顏色宣告。MDN 示範了這個明確的差異：即使父元素使用 revert，段落仍保留直接指定給它的顏色。因此，如果不想要的外觀來自後代選擇器，只重設包裝元素並不足夠。MDN 的父元素重設範例

將重設套用至每個後代會擴大作用範圍，但也會移除實用的版面配置和格式。使用 all: initial 時，除非你重新指定，連瀏覽器通常賦予區塊元素的區塊顯示方式也會消失。只有在你能刻意重建所需呈現方式時，才使用這類重設。規格中的小工具重設範例

revert-layer 的用途不同：它會透過層疊層回退某個屬性。當問題出在特定樣式層時，它很有用，但不會建立元件界線。CSS 層疊層回退

在 Mac 上建立獨立的預覽面板

這個完整範例會建立深色的周圍介面，以及一個包含合成標籤和兩個原創 CSS 形狀的淺色巢狀面板。所有內容都直接寫在檔案中：不需要下載、套件、外部字型或圖片檔案。

在 TextEdit 中選擇 File > New，再選擇 Format > Make Plain Text。貼上以下完整範例，將它儲存為 section-reset.html，並在出現提示時選擇 Use .html。這些是 Apple 說明的建立 HTML 檔案步驟。在 Mac 上使用 TextEdit 處理 HTML 文件

<!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>

在 Mac 瀏覽器中開啟儲存的檔案。預期結果是淺色面板，內有大小寫混合的標題和沒有框線的段落。面板外的標題仍會是藍色大寫字，段落仍會保留左側框線。這些是範例預期呈現的結果，不是瀏覽器測試的量測數據。

指令碼會在用途為空的宿主元素上附加 shadow root，並在該 root 中建立面板。其樣式表屬於 shadow tree，因此一般標題和段落選擇器會在內部套用。文件的一般標題和段落選擇器則不會套用到這些內部元素。這符合 MDN 說明的 Shadow DOM 樣式模式。

內部的 .panel 提供了解決方案的第二部分：明確的基準樣式。Shadow 界線會隔開選擇器比對，但繼承仍會沿著渲染後的元素樹運作。重設內部包裝元素，可避免周圍的襯線字型和字母間距成為它一般繼承的基準樣式。目前的 CSS Shadow 規格描述了這種繼承模型；該規格仍是編輯草案。CSS Shadow Module Level 1

還有哪些內容會跨越界線或影響界線？

宿主仍是周圍文件中的一個元素。頁面規則可以更改它的邊界、寬度或顯示方式，而祖先元素仍會決定面板可用的空間。讓宿主的位置由頁面樣式表控制，並讓面板的內部外觀由 shadow 樣式表控制。這種分工符合文件中對 shadow host 和內部樹的區別。CSS 範圍指南

自訂屬性也需要明確的契約。all 不會清除它們。此範例不使用繼承的自訂屬性，因此外部變數無法透過 var() 參照改變它選定的顏色。如果日後加入主題變數，請明確定義元件接受哪些名稱，並提供內部預設值。MDN 的重設排除項目

若要讓新加入的面板內容使用相同的選擇器界線，請將它放在 shadow root 內。插槽內容的樣式關係不同，因為它源自 light tree；加入插槽會改變此範例的假設。CSS Shadow 對插槽和樹狀關係的說明

Shadow DOM 也不是資源重設指令。此範例完全不依賴外部資源。如果你需要的是一份有獨立樣式表參照的 HTML 文件，請使用下方的 iframe 方法。

什麼時候應該改用 iframe？

iframe 會嵌入另一份文件。因此，若要讓獨立樣式的預覽擁有與周圍頁面分開的文件設定，iframe 就很合適。HTML 標準定義了 src，用於參照資源；也定義了 srcdoc，用於內嵌文件。HTML 標準：iframe 元素

若要使用本機的雙檔案配置，請建立第二個完整 HTML 檔案，命名為 panel.html，並在其中放入面板及其樣式表。接著以參照該檔案的 iframe 取代宿主元素和指令碼。以下是整合片段，不是獨立文件：

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

這裡的檔名是本機範例檔名。使用此片段前，請先提供實際的第二個檔案。框架外部尺寸由包含它的頁面設定；嵌入的頁面則提供內部呈現方式。可將 280px 作為示範起始高度，並檢查較長內容是否放得下，而不要假設它一定能放得下。

如果改用 srcdoc，請記住，相對資源 URL 會以嵌入頁面的 URL 為基準解析。因此，內嵌文件內容不會自動擁有獨立的資源基底。MDN 也說明，不支援的 srcdoc 會回退至 src。MDN 的 iframe 屬性參考資料

檢查相容性並診斷非預期樣式

MDN 標示基本的 attachShadow() 和 all 屬性自 2020 年 1 月起已廣泛支援於各瀏覽器。這不代表這些功能的每個較新選項都受到支援。此範例使用基本的 open 模式，並在 Shadow DOM 無法使用時保留可見的備用訊息。MDN：attachShadow()、MDN：all

@scope 是另一種限制一組選擇器套用範圍的支援方式，但它不會阻止繼承，也不會防止無關的全域規則進入子樹。MDN 指出，自 2026 年 3 月起，現行瀏覽器已普遍支援此功能，但舊版瀏覽器仍有限制。如果選擇器組織方式已符合需求，就使用它；若需要 Shadow DOM 或 iframe 各自提供的界線，則保留這些方式。MDN：@scope

編輯範例後，請依照以下順序診斷：

  1. 如果檔案顯示原始碼文字，請確認儲存的副檔名是 .html，並在瀏覽器中開啟。
  2. 如果備用訊息仍然顯示，請確認 JavaScript 有執行，且瀏覽器支援 attachShadow()。
  3. 如果面板外觀不正確，請確認其內容已附加至 shadow root，然後檢查內部基準樣式和樣式表。
  4. 如果周圍介面發生變化，請檢查文件樣式表和宿主規則的修改。
  5. 如果內容放不下，請先檢查宿主或框架尺寸，再更改字體排印。

選擇符合需求的最小界線：使用目標式 CSS 修正受控樣式，使用 Shadow DOM 加上明確的基準樣式封裝面板，或使用 iframe 建立獨立文件。明確設定位置、內部樣式和資源參照，這樣區段就能改變，而不必重新設計周圍環境。

來源