likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 8

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

简介


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>

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

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

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

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

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

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

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

2. deep 样式穿透

使用方法

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

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

: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^

转载自:https://juejin.cn/post/7348842402826240041
评论
请登录