Vue3中deep样式穿透的使用细节及源码解析

我们虽然走的很慢，但从未停止过脚步。

简介

---

Vue3 中可以在 style 标签中使用 :deep() 的方法进行样式穿透，主要是解决在使用第三方的 UI 库（如 element-plus 等）时导致的对其样式设置不生效的问题。

1. scoped属性

在介绍deep样式穿透之前，我们先看一下scoped属性。

在一个 Vue3 组件的 style 标签中可以对其设置 scoped 属性 <style scoped>，</style>。该属性的作用主要有以下三个方面：

• [ Vue 会为该组件 template 中定义的 HTML 元素中添加一个 data-v-{一个hash值} 的属性选择器 ]
• [ 在 style 标签中写的 CSS 样式 Vue 都会在样式选择器的最后段添加上 data-v-{一个hash值} 的属性标签 ]
• [ 而在使用第三方的 UI 库时，只会为根元素添加 data-v-{一个hash值} 属性，而子元素则不会添加 ]

说的简单一点，其实就是在 HTML 的标签下添加了一个 属性选择器，可以根据这个属性选择器来保证各个组件的样式不被相互污染，从而实现一个模块化的效果。

举个栗子（element-plus）：

<template>
    <div class="main">
        <el-input class="ipt"></el-input>
    </div>
</template>

<script srtup></script>

<style scoped>
    .ipt {
        width: 300px;
    }
</style>

在这个栗子中，主要使用了一个 标签，并为其设置了一个宽度。

那么随之而来就产生一个问题，当使用以下方法修改样式时并不能生效：

   .ipt .el-input__wrapper {
        background-color: red;
    }

但该选择器确实是添加进去了。

出现这种结果的原因就在于 Vue 将 [data-v-7a7a37b1] 属性添加到 .el-input__wrapper 之后， 而 .el-input__wrapper 的标签上并不存在 [data-v-7a7a37b1] 属性。那么 deep 样式穿透随之而来。

2. deep 样式穿透

使用方法

    :deep(.ipt .el-input__wrapper) {
        background-color: red;
    }

:deep() 函数会把属性选择器放在最前面，那么就可以捕获到啦！

3. 源码解析

目录：core-main/packages/compiler-sfc/src/compileStyle.ts

    export function doCompileStyle(
      scoped = false,
    ): SFCStyleCompileResults | Promise<SFCStyleCompileResults> {
      ......
      if (scoped) {
        plugins.push(scopedPlugin(longId))
      }
      ......
    }

在这个函数中，如果存在 scoped 属性，就会调用 postcss 这个插件，这个插件的主要作用就是把 CSS 转换成抽象语法树 (AST) 便于之后的操作。

   function processRule(id: string, rule: Rule) {
      ......
      rule.selector = selectorParser(selectorRoot => {
        selectorRoot.each(selector => {
          rewriteSelector(id, selector, selectorRoot)
        })
      }).processSync(rule.selector)
   }

之后在 processRule 函数中调用 rewriteSelector() 方法对 CSS 选择器进行重写。

    function rewriteSelector(
      id: string,
      selector: selectorParser.Selector,
      selectorRoot: selectorParser.Root,
      slotted = false,
    ) {
      let node: selectorParser.Node | null = null
      let shouldInject = true
      // find the last child node to insert attribute selector
      selector.each(n => {
        ......
        if (n.type === 'pseudo') {
          const { value } = n
          // deep: inject [id] attribute at the node before the ::v-deep
          // combinator.
          if (value === ':deep' || value === '::v-deep') {
            if (n.nodes.length) {
              // .foo ::v-deep(.bar) -> [xxxxxxx] .foo .bar
              // replace the current node with ::v-deep's inner selector
              let last: selectorParser.Selector['nodes'][0] = n
              n.nodes[0].each(ss => {
                selector.insertAfter(last, ss)
                last = ss
              })
              // insert a space combinator before if it doesn't already have one
              const prev = selector.at(selector.index(n) - 1)
              if (!prev || !isSpaceCombinator(prev)) {
                selector.insertAfter(
                  n,
                  selectorParser.combinator({
                    value: ' ',
                  }),
                )
              }
              selector.removeChild(n)
            } else {
                 ......
            }
        ......
    }

当遇到 :deep 时，会将原来的属性选择器添加到前面元素中，即：.foo ::v-deep(.bar) -> [xxxxxxx] .foo .bar 通过这种方法就能定位到第三方 UI库中的 CSS 选择器了。

结语

在 Vue3 中，当使用一些第三方的 UI 库时，由于 Vue3 实现了模块化封装，那么再设置 UI 库的 CSS 样式时有时会出现设置不成功的问题，那么这个时候可以考虑使用 :deep() 来进行样式穿透。

本人为前端小趴菜，如果有什么写的不对的地方，欢迎大家一起探讨。^v^