CSS @scope 限定组件样式作用域的迁移方法

我第一次把一组卡片样式迁到 @scope 时，真正让我改观的不是少写了几个类名，而是嵌套卡片终于不再被外层规则误伤。原来为了“锁住”组件而写的 .catalog .product-card .product-card__title，可以退回到更短、更容易覆盖的组件内选择器；边界则由样式规则本身明确表达。

迁移时不要直接把旧选择器整批删除。更稳妥的做法是：先确定稳定的组件根节点，再用下边界挡住嵌套组件，保持一段时间的旧规则回退，最后根据项目的浏览器支持范围逐组件清理。MDN 当前把 @scope 标记为 Baseline 2026，并提示旧设备或旧浏览器可能不可用，所以兼容策略仍然是迁移的一部分。

官方资料：https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/%40scope

规范草案：https://drafts.csswg.org/css-cascade-6/#scoped-styles

先盘点旧选择器从哪里进入组件

我会先把旧 CSS 分成两类。第一类是真正属于组件的标题、价格、按钮和状态样式；第二类是页面布局、主题或营销区对组件施加的外部约束。只有第一类适合迁进组件作用域，第二类仍应留在页面层，否则组件会悄悄接管不属于自己的职责。

机械键盘
  
¥399
  

    加入清单
  

这里额外加了 data-ui="card"。它的价值不是“再造一个类”，而是把组件身份和展示状态分开：.product-card 可以继续参与布局或主题切换，data-ui 专门承担作用域根的职责。以后重命名布局类时，组件边界不会跟着漂移。

用稳定根节点定义作用域边界

最小写法只需要上边界：@scope ([data-ui="card"])。但真实组件经常允许嵌套，例如推荐商品卡里再放一个迷你卡。如果没有下边界，外层的 .card__title 仍可能命中内层同名节点。我更倾向于把任何后代 [data-ui] 当作停止位置，让每个组件自己负责自己的子树。

/* 上边界是当前卡片；遇到后代组件根时停止匹配 */
@scope ([data-ui="card"]) to ([data-ui]) {
  :scope {
    border: 1px solid #d8dee9;
    border-radius: 12px;
    background: #fff;
  }

  /* 裸选择器只在当前作用域内寻找目标 */
  .card__title {
    margin: 0;
    font-size: 1.125rem;
  }

  .card__actions {
    display: flex;
    gap: 0.75rem;
  }
}

to ([data-ui]) 形成的是下边界。下边界元素本身及其后代默认不属于外层作用域，因此嵌套组件可以重新建立自己的根。这个结构比继续追加 :not() 更容易读，也不会把 DOM 层级永久焊进每一个选择器。

保持回退规则并平行加入 @scope

我迁移时最不适应的一点，是“新规则看起来已经正确”并不等于“可以立刻删旧规则”。不支持 @scope 的浏览器会忽略整个未知规则块，所以第一阶段应保留已有前缀选择器，并让新旧两套声明保持一致。支持新语法的浏览器会同时读到两套规则，不支持的浏览器仍使用旧规则。

/* 第一阶段：旧浏览器继续使用这组前缀规则 */
.product-card .card__title {
  margin: 0;
  font-size: 1.125rem;
}

.product-card .card__actions {
  display: flex;
  gap: 0.75rem;
}

/* 第一阶段：新浏览器同时获得明确的组件边界 */
@scope ([data-ui="card"]) to ([data-ui]) {
  .card__title {
    margin: 0;
    font-size: 1.125rem;
  }

  .card__actions {
    display: flex;
    gap: 0.75rem;
  }
}

双写阶段不适合新增两套不同的视觉值，否则排查结果会被选择器权重干扰。我的做法是先做等价迁移，确认根节点、嵌套和主题状态都覆盖后，再把后续改动只落到统一的源码片段或构建入口，避免维护者手工同步两个文件。

当目标浏览器范围已经满足团队约定，可以按组件删除旧块，而不是按文件一次性清空。每删一个组件的旧规则，就核对默认态、交互态、嵌套态和主题态；这样出了问题也容易定位是哪一个边界定义不完整。

校准 :scope、权重与作用域邻近度

:scope 用来选中作用域根本身，裸选择器则在作用域内匹配后代。两者不要混用：给卡片外壳加边框时写 :scope，给标题和按钮写内部类。规范还定义了作用域邻近度：在其他层叠条件可比较时，离目标元素更近的作用域根拥有更高优先级。这让嵌套组件更容易覆盖外层组件，而不必不断提高选择器权重。

/* 外层组件只提供普通标题色 */
@scope ([data-ui="card"]) to ([data-ui]) {
  .card__title {
    color: #344054;
  }
}

/* 更靠近迷你组件标题的根可提供自己的颜色 */
@scope ([data-ui="mini-card"]) to ([data-ui]) {
  .card__title {
    color: #175cd3;
  }
}

需要注意的是，@scope 前导中的根选择器不会像传统祖先前缀那样直接叠加到内部选择器权重上。裸选择器和 & 在作用域内按接近 :where(:scope) 的方式工作，而显式 :scope 自身是伪类，会增加类级权重。迁移后若某条覆盖关系改变，先看来源层、重要性、选择器权重和作用域邻近度，不要第一反应就加 !important。

继承、浮层和跨子树内容要单独处理

@scope 是选择器范围限制，不是完整的样式隔离。比如外层根设置了 color 或 font-family，这些可继承属性仍可能进入下边界里的嵌套组件。需要真正重置时，应在内层根使用设计令牌或明确的继承策略，而不是误以为 to() 会切断继承。

/* 页面提供令牌，组件只消费令牌，不把具体主题焊死 */
:root {
  --card-text: #344054;
  --card-surface: #ffffff;
}

@scope ([data-ui="card"]) to ([data-ui]) {
  :scope {
    color: var(--card-text);
    background: var(--card-surface);
  }
}

/* 嵌套组件在自己的根上重新声明需要隔离的继承值 */
[data-ui="mini-card"] {
  --card-text: #175cd3;
}

另一个常见边界是浮层。下拉菜单、提示框或模态框如果通过 portal 挂到 body，它们已经离开组件子树，组件内的 @scope 不会命中它们。此时要么给浮层建立独立作用域根，要么继续使用浮层自己的命名空间和设计令牌。强行把选择器从组件“伸出去”违背了作用域的本意。

Shadow DOM 也不能与 @scope 混为一谈。Shadow DOM 提供封装边界，而 @scope 主要约束选择器匹配区域；对于需要脚本、插槽和强封装的 Web Component，仍应按 Shadow DOM 的模型设计。

我会在这些条件满足后删除旧规则

• 项目的浏览器支持范围已经覆盖 @scope，并明确接受旧环境降级。
• 组件根节点稳定，不依赖页面布局类、临时状态类或构建时随机类名。
• 嵌套组件有清晰下边界，默认态、交互态、主题态和禁用态都已核对。
• portal、弹层和跨子树内容已经拥有独立规则，不再依赖组件内部选择器。
• 可继承属性通过设计令牌或内层重置处理，没有把“选择器隔离”误当成“继承隔离”。

对我来说，@scope 最适合已有稳定组件根、但还在用长祖先选择器防止串样式的项目。它不会自动修复混乱的组件职责，也不会替代主题系统和 Shadow DOM；不过当边界已经明确时，它能把“这个规则究竟属于哪里”直接写进 CSS，而不是藏在命名约定里。

常见问题

@scope 会让内部选择器自动拥有根选择器的权重吗？

不会。作用域根不会像传统祖先前缀那样简单叠加到内部选择器权重上。内部裸选择器保持自身权重，层叠时还会考虑作用域邻近度。

下边界能阻止 color 继承进嵌套组件吗？

不能。下边界限制选择器匹配，但可继承属性仍可能继续向后代传播。需要在嵌套组件根上重设变量或属性。

旧浏览器不支持 @scope 会怎样？

未知的规则块会被忽略，因此迁移期要保留可用的旧选择器规则。等项目支持范围允许后，再逐组件删除回退块。

所有组件都需要写 to() 下边界吗？

不一定。不会嵌套同类组件、也没有后代子组件命名冲突时，只写作用域根就够了；存在嵌套或复合组件时，下边界更能体现价值。