前言

在 Web 开发里，组件样式之间的互相影响，一直是个绕不开的话题。为了不让样式“打架”，Vue 搞出了 scoped 样式这个概念——让组件的样式只待在自己的地盘上，别去污染全局。同时，还弄了个 deep 选择器，专门用来让样式“穿透”到子组件内部。

不过在小程序的世界里，有一套自己的样式隔离机制，开发者可以通过不同的配置来控制隔离的程度。这篇文章就来聊聊小程序的样式隔离实践，顺便把 Vue scoped 的底裤也扒一扒，帮大家彻底搞懂这回事。

实践指南

先说说 scoped 怎么用。给

Web 端编译后大致变成：

<div class="content" data-v-1cf27b2a>
  <span class="title" data-v-1cf27b2a>hellospan>
div>

.content .title[data-v-1cf27b2a] {
  color: red;
}

scoped 的源码入口

Vue 3 中和 scoped 样式最相关的是 @vue/compiler-sfc 包：

packages/compiler-sfc/src/compileStyle.ts
packages/compiler-sfc/src/style/pluginScoped.ts

其中：

1. compileStyle.ts：处理