让css只在当前组件内生效与如何做样式穿透

要让CSS只在当前组件内生效，可以使用CSS模块或者Shadow DOM。

CSS模块：

在CSS文件中使用.css扩展名，并在<style>标签中添加module属性。

<!-- MyComponent.vue -->
<template>
  <div :class="$style.red">红色文本</div>
</template>
 
<style module>
.red {
  color: red;
}
</style>

Shadow DOM：

在Web组件中使用Shadow DOM可以创建一个隔离的DOM树，其样式只应用于这个树内部。

// MyComponent.js
export default {
  mounted() {
    const shadow = this.$el.attachShadow({ mode: 'open' });
    shadow.innerHTML = `<style>
      .red { color: red; }
    </style><div class="red">红色文本</div>`;
  }
}

如何做样式穿透：

有些时候，我们需要影响子组件内部的DOM元素，这就需要进行样式穿透。

使用>>>、/deep/或::v-deep选择器可以穿透单层级的Shadow DOM。

/* 使用/deep/ */
.deep-red /deep/ .red {
  color: red;
}
 
/* 使用>>> */
.deep-red >>> .red {
  color: red;
}
 
/* 使用::v-deep (Vue-specific) */
.deep-red ::v-deep .red {
  color: red;
}

请注意，::v-deep是一个Vue特定的语法糖，在其他框架中可能有不同的实现方式。