要重置你编写的页面中的某个区块，可对受控标记使用定向 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 时，连浏览器通常为 div 元素设置的块级显示方式也会丢失，除非你将其恢复。只有在能够有意重建所需呈现效果时，才使用这种重置。规范中的小组件重置示例

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 附加到一个空用途的宿主元素，并在该根节点内创建面板。样式表属于 Shadow Tree，因此普通的标题和段落选择器会在内部生效。文档中的普通标题和段落选择器无法匹配这些内部元素。这符合 MDN 文档中的 Shadow DOM 样式模式。

内部的 .panel 提供了解决方案的第二部分：明确的基准样式。Shadow 边界会隔离选择器匹配，但继承仍会沿渲染后的元素树进行。重置内部包装元素，可以避免外围的衬线字体和字间距成为它通常继承的基准样式。当前 CSS Shadow 规范描述了这一继承模型；该规范仍是编辑草案。CSS Shadow 模块第 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。明确规定位置、内部样式和资源引用，这样区块就能更改，而无需重新设计周围页面。

来源