Vueでは、親コンポーネントはスコープを使用しますが、操作の子コンポーネントの非ルートノードスタイルが有効にならないのはなぜですか？

スコープなし

親コンポーネント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の背景色がピンクに変わり、リーズナブルです！

スコープを追加

親コンポーネントApp.vue

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

コンパイルされたスタイルと構造は次の図のようになります。h1の背景は効果的ではありません。

理由説明

スコープを追加した後

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タグにヒットせず、有効になりません。

対処方法

親コンポーネントApp.vue

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

解決策の原則は、コンパイルされたh1スタイルが複合セレクター（属性セレクター）に追加されないようにすることです。コンパイル結果は次の図のようになります。