Vue3项目的css样式穿透问题

css样式穿透

在vue3项目中，组件已经不需要多个根标签了。

App.vue

<template>
  <h2>111</h2>
  <hello-world></hello-world>
</template>

<script>
import HelloWorld from "./HelloWorld.vue";
export default {
  components: {
    HelloWorld,
  },
};
</script>

<style scoped>
h2 {
  color: blueviolet;
}
</style>

HelloWorld.vue

<template>
  <h2>hello workld！！！</h2>
</template>

<script>
export default {};
</script>

<style scoped>
h2 {
  color: aquamarine;
}
</style>

页面效果

结论

即使我们给每个组件设置了自己的样式，我们发现最后页面的样式也是以根页面 App的样式为主。
这是因为我们设置样式时是直接给 h2，h3这种标签设置样式。所以样式会穿透到注册的局部组件中。
只要在每个组件上（包括根组件）设置样式时，采用类名或者id来注册样式，则不会发生这种情况了。