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

js 复制代码
<template>
    <div class="main">
        <el-input class="ipt"></el-input>
    </div>
</template>

<script srtup></script>

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

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

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

css 复制代码
   .ipt .el-input__wrapper {
        background-color: red;
    }

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

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

2. deep 样式穿透

使用方法

css 复制代码
    :deep(.ipt .el-input__wrapper) {
        background-color: red;
    }

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

3. 源码解析

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

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

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

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

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

ts 复制代码
    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^

相关推荐
十一吖i17 分钟前
前端将后端返回的文件下载到本地
vue.js·elementplus
光影少年18 分钟前
vue2与vue3的全局通信插件,如何实现自定义的插件
前端·javascript·vue.js
熊的猫1 小时前
JS 中的类型 & 类型判断 & 类型转换
前端·javascript·vue.js·chrome·react.js·前端框架·node.js
mosen8682 小时前
Uniapp去除顶部导航栏-小程序、H5、APP适用
vue.js·微信小程序·小程序·uni-app·uniapp
别拿曾经看以后~3 小时前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
Gavin_9154 小时前
【JavaScript】模块化开发
前端·javascript·vue.js
Devil枫9 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
GIS程序媛—椰子10 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
毕业设计制作和分享11 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
程序媛小果11 小时前
基于java+SpringBoot+Vue的旅游管理系统设计与实现
java·vue.js·spring boot