Vue 中，父组件使用了 scoped，为什么操作子组件的非根节点样式就不生效了！

不加 scoped

父组件 App.vue

<template>
  <div class="app">
    <HelloWorld />
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue';

export default {
     
     
  name: 'App',
  components: {
     
     
    HelloWorld,
  },
};
</script>

<style lang="less">
// 在父组件中操作子组件的样式，没什么问题，正常生效！
h1 {
     
     
  background-color: pink;
}
</style>

子组件 HelloWorld.vue

<template>
  <div class="hello">
    <h1>Hello World</h1>
  </div>
</template>

<script>
export default {
     
     
  name: 'HelloWorld',
  props: {
     
     
    msg: String
  }
}
</script>

编译后的样式和结构如下图，h1 背景颜色变粉，合情合理！

加 scoped

父组件 App.vue

<style lang="less" scoped>
h1 {
     
     
  background-color: pink;
}
</style>

编译后的样式和结构如下图，h1 背景没有生效！

原因解释

加了 scoped 后

1、Vue 会给当前组件的所有节点以及子组件的根节点加上一个唯一的属性

2、编译后的样式也都会以复合选择器（属性选择器）的形式自动加上这个属性

3、例如你写的 h1 { background-color: pink; }，本意是操作子组件的 h1 标签，实际编译后的样式可能是 h1[data-v-7ba5bd90] { background-color: pink; } ，但是！子组件的 h1 节点并没有这个属性，所以 h1[data-v-7ba5bd90] { background-color: pink; } 并不会命中 h1 标签，所以不会生效！

扫描二维码关注公众号，回复： 12787037 查看本文章

怎么解决

父组件 App.vue

<style lang="less" scoped>
/deep/ h1 {
     
     
  background-color: pink;
}
</style>

解决原理，保证编译后的 h1 样式不被加复合选择器（属性选择器），编译结果如下图