title: Vue js - making a style to be inherited by children components
body: <p>First of all, when I want to make a style private for the current component, I define it inside a  tag.
  To make the style visible for child components, I'm using a deep selector to let it pass through, as below:</p>
  <pre><code>&lt;style scoped&gt;
     .a &gt;&gt;&gt; .b {
         ...
     }
  &lt;/style&gt;
  </code></pre>
  <p>The code above is translated to</p>
  <pre><code>.a[data-v-f3f3eg9] .b
  </code></pre>
  <p>Which, in other words say: for every child of this specific a, if it is b then apply the following style on it.</p>
  <p>My question is about the following statement:</p>
  <pre><code>&lt;style scoped&gt;
     &gt;&gt;&gt; .b {
        ...
     }
  &lt;/style&gt;
  </code></pre>
  <p>First of all, Visual Code throws an error about this expression:</p>
  <blockquote>
  <p>[css] at-rule or selector expected</p>
  </blockquote>
  <p>Which expect me to put a scoped selector before the deep selector.
  What I'm trying to figure out, is if this expression is preprocessed as stated in the documentation, which should be</p>
  <pre><code>.b
  </code></pre>
  <p>Then what makes this style not global, and different from the definition below (which is not scoped):</p>
  <pre><code>&lt;style&gt;
     .b {
         ...
     }
  &lt;/style&gt;
  </code></pre>
  <p>In fact, they are different. I've tried it and the later is actually global while the former is visible for the parent component and it's children.</p>
  <p>Does anyone have an explanation for this? and, if the syntax</p>
  <pre><code>&lt;style scoped&gt;
     &gt;&gt;&gt; .b {
        ...
     }
  &lt;/style&gt;
  </code></pre>
  <p>Is not that common, what is the right way to make a style intended for child components only, while not defining a selector for the parent element?</p>