Parent component plus scoped Sometimes it also affects sub components

In writing today vue When the parent component is added scoped when , Without using /deep/ It will also affect the style of sub components , The details are as follows .

• Parent component

  <template>
    <div id="app">
      <div class="app_top">
        <h1>Vue- practice </h1> 
        <hr>
      </div>
      <!-- Child components Left-->
      <Left></Left>
    </div>
  </template>
  
  <style lang="less" scoped>
      .content_left{
        text-align: center;
      }
  </style>
  

• Child components Left

  <template>
    <div class="content_left">
      Myleft
    </div>
  </template>
  

  This parent component is not used /deep/ In the time sub component "Myleft" Not centered , But the fact is that "Myleft" The center shows .
  

• reason

  Debugging in the browser found , When the parent component is added scoped It will not only add to its own elements "data-v-xxx" Custom properties for , At the same time, it will also add "data-v-xxx" Custom properties for .

  

  

  ---

  The end ！！

  ---