我们虽然走的很慢,但从未停止过脚步。
简介
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^