样式穿透

总结一下scoped三条渲染规则：

给HTML的DOM节点加一个不重复data属性(形如：data-v-123)来表示他的唯一性

页面加了scoped 都会加上一个data-v-hash 属性

2. 在每句css选择器的末尾（编译后的生成的css语句）加一个当前组件的data属性选择器（如[data-v-123]）来私有化样式

如果组件内部包含有其他组件，只会给其他组件的最外层标签加上当前组件的data属性

第二条和第三条会有冲突

上面样式是加了【data-v-hash】

vue2 可以用 /deep/ 或者 <<< 还有 ::v-deep vue3 会警告了

：deep () 属性选择器跟在谁的后面 [data-v-hash] 就会放在谁的后面

相信大家以前为了解决这种问题都是另起一个style 把所有的scope都去掉，然后每个页面用不同的id/class来隔离样式

比如在我开发的时候遇到的自定义el-select 的每个item的内容高度

// 一定要在el-select popper-class上加 不要另外起class
.el-select-content {
  .el-scrollbar {
    .el-select-dropdown__wrap {
      .el-select-dropdown__item {
        height: 60px;
        line-height: 60px;
      }
    }
  }
}

是需要写在单独的 style 里面的

PostCss 插件（解析css 转换成ACT语法树）

PostCSS-是一个用 JavaScript 工具和插件来转换 CSS 代码的工具|PostCSS 中文网

类似与babel es6 => es5

css Style完整新特性

在父组件加了class 但是样式是写在子组件的

默认情况下，作用域样式不会影响到 <slot/> 渲染出来的内容，因为它们被认为是父组件所持有并传递进来的。

<style scoped>
 :slotted(.a) {
    color:red
}
</style>

全局样式定义

动态样式

单个

对象

只有js中才需要.value 其实加个引号就行

moudule

单个多个

自定义名字把$style换成自定义的zs

借助useCssModule（‘自定义module名字’）

也是跟hash组合生成的

场景：

tsx render（）函数

参考：

blog.csdn.net/qq119556631… 2. blog.csdn.net/qq119556631… 3.视频地址： www.bilibili.com/video/BV1dS…

还没搞懂css样式穿透？