uni-app 小程序样式隔离实践指南与原理分析

前言

在Web开发领域，组件样式间的相互影响始终是一个关键议题。为解决样式冲突，Vue框架引入了scoped样式机制，它确保组件的样式仅作用于当前组件，有效防止全局污染。同时，框架还提供了deep选择器，允许样式穿透至子组件中。

然而，在小程序开发环境中，存在一套专属的样式隔离机制，开发者可通过不同配置实现不同程度的样式隔离。本文将详细阐述小程序样式隔离的实践指南，并深入剖析Vue scoped的实现原理，助力开发者更透彻地理解与应用小程序的样式隔离体系。

实践指南

借助scoped属性，组件样式得以限定在自身范围内，避免了全局样式冲突。当使用scoped样式时，编译器会为每个组件生成一个独一无二的属性选择器，并将其附加至组件的根元素上。这样一来，仅带有所述属性选择器的元素才能应用该组件样式，从而达成样式隔离。

假如我们有这样一个页面：

<template>
  <view class="content">
    <comp>comp>
  view>
template><script setup>
  import comp from "./comp.vue";
script><style scoped>
  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }  .content .comp-text {
    color: green;
  }
style>

编译到微信小程序后，生成的样式会类似于：

.content.data-v-1cf27b2a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.content .comp-text.data-v-1cf27b2a {
  color: green;
}

可见，编译器为每个样式规则附加了一个独特的属性选择器，例如data-v-1cf27b2a，并将其添加至组件的根元素。因此，只有携带此属性选择器的元素才能应用本组件样式，样式隔离由此实现。

有时，我们需要让父组件样式穿透到子组件，此时可借助deep选择器。deep选择器允许在父组件中定义样式，并使其作用于子组件内的元素。例如，我们有如下组件代码：

<template>
  <view>
    <text class="comp-text">comp 组件text>
  view>
template><style>
  .comp-text {
    color: red;
  }
style>

此时，页面上的文本颜色为红色。若要在父组件中覆盖子组件的样式，可使用deep选择器：

-  .content .comp-text {
+  .content :deep(.comp-text) {
    color: green;
  }

编译产物如下：

- .content .comp-text.data-v-1cf27b2a {
+ .content.data-v-1cf27b2a .comp-text {
        color: green;
}

可以看到，编译器将deep选择器转换为普通选择器，并将其置于组件根元素之前。如此，父组件样式便能够覆盖子组件样式。

上述机制之所以生效，是因为styleIsolation的默认值为apply-shared。若将styleIsolation设置为isolated，则即使使用deep选择器，父组件样式也无法穿透到子组件。

vue scoped 原理

scoped 的核心思路

Vue的scoped并非Shadow DOM或浏览器原生隔离能力，其本质是编译器执行了两项操作：

1. 为当前组件生成一个唯一的scopeId，例如data-v-1cf27b2a。
2. 在模板节点上附加这个scopeId，同时CSS选择器也追加该scopeId。

例如源码中写：

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：负责处理