Vue 组件私有样式 scoped，如何穿透，以及原理(分享)

scoped

• 作用：使样式局部生效，防止冲突
• 写法：<style scoped>
• 原理：为每一个标签添加了一个 data-v-xxx 属性，通过属性选择器添加样式
• 注意：父组件的 scoped 会给子组件根元素添加一个相同的 data-v-xxx 属性

穿透

• 在使用组件库的时候，只是给了组件根元素添加了属性
• 这个时候就需要用到穿透，穿透的原理是把 .van-tabbar-item i[data-v-xxx] ==> 变为 .van-tabbar-item[data-v-xxx] i，由于 .van-tabbar-item 本来就添加了自定义属性，所以自然就可以添加样式
• css 穿透

  <!-- 拿 vant 组件为例 -->
  <style scoped>
  .van-tabbar-item >>> i {
    font-size: inherit;
  }
  </style>
  

• less 穿透

  <style lang="less" scoped>
  .van-tabbar-item /deep/  i {
       font-size: inherit;
  }
  

• scss 穿透

  <style lang="scss" scoped>
  .van-tabbar-item ::v-deep i {
       font-size: inherit;
  }
  

• vue3 scss 和 less 穿透

  <style lang="scss" scoped>
  .van-tabbar-item :deep(i) {
     font-size: inherit;
  }