title: How to style a nested component from its parent component in Vuejs?
body: <p>I am going to create a layout like 'header sidebar main-content sidebar footer ' with flexbox by Vuejs. 
  I created separate .vue files for each part of the layout , I mean something like a sidebar.vue and a header.vue and so on ....
  <br> And I am going use them in App.vue file like :</p>
  
  <pre><code>&lt;template&gt;
    &lt;div id="app"&gt;
      &lt;app-header &gt;&lt;/app-header&gt;
      &lt;app-sidebar&gt;&lt;/app-sidebar&gt;
      &lt;app-content&gt;&lt;/app-content&gt;
      &lt;app-sidebar&gt;&lt;/app-sidebar&gt;
      &lt;app-footer&gt;&lt;/app-footer&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import header from "./components/header";
  import sidebar from "./components/sidebar";
  import content from "./components/content";
  import footer from "./components/footer";
  
  export default {
    components: {
      "app-header": header,
      "app-sidebar": sidebar,
      "app-content": content,
      "app-footer": footer
    }
  };
  &lt;/script&gt;
  
  &lt;style lang="scss"&gt;
  
  body {
    margin: 0;
    padding: 0;
  }
  
  
  #app {
    border: 3px solid red;
    min-height: 100vh;
  
    display: flex;
    flex-wrap: wrap;
  
    &gt; * {
      border: 1px solid black;
    }
  }
  </code></pre>
  
  <p>the main problem is I can not select these custom nested components from App.vue file to style them. for example i can not use app-header{} like other normal tags in html and css  to select it and style it within style tags inside of App.vue file . is there anyway to solve it ? 
  <br>NOTE : I know I can assign a class to each of these nested components and then select them to use with css class selector .</p>