Vue2 Vue3 Scoped 样式穿透问题
投稿：jingxian
Vue中scoped样式的作用是通过在DOM结构和CSS样式上添加唯一标记来实现样式私有化和模块化,这一功能是通过PostCSS转译实现的,总结了三条渲染规则：1. 为HTML DOM节点添加不重复的data属性；2. 在每个CSS选择器末尾添加当前组件的data属性选择器
概念
主要是用于修改很多 Vue 常用的组件库（Element, Vant, AntDesigin），虽然配好了样式但是还是需要更改其他的样式， 因为添加了 scoped 实现 css 模块化
就需要用到 样式穿透 ，更改组件的样式
scoped 的原理
Vue 中的 scoped 通过在 DOM结构以及 css 样式上加唯一不重复的标记: data-v-hash 的方式，以保证唯一（而这个工作是由过 PostCSS 转译实现的），达到 样式私有化模块化的目的。
简单示例代码如下
<template>
<div>
<el-input placeholder="Please input" class="ipt" />
</div>
</template>
<script setup lang="ts">
</script>
<style scoped>
.ipt {
width: 300px;
margin: 100px 400px;
}
</style>总结一下 scoped 三条渲染规则
1.给 HTML 的 DOM 节点加一个不重复 data 属性(形如：data-v-123)来表示他的唯一性
2. 在每个 CSS 选择器的末尾（编译后的生成的 CSS 语句）加一个当前组件的 data 属性选择器（如 [data-v-123]）来私有化样式
3. 如果组件内部包含有其他组件，只会给其他组件的最外层标签加上当前组件的 data 属性
注意：
<template>
<div>
<el-input placeholder="Please input" class="ipt" />
</div>
</template>
<script setup lang="ts">
</script>
<style scoped lang="less">
.ipt {
width: 300px;
margin: 100px 400px;
.el-input__inner {
background-color: red;
}
}
</style>总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。