title: Vue: What is the cleanest way to select a component via CSS?
body: <p>I have a <code>bar</code> component. It is used like this:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;!-- stuff --&gt;
      &lt;bar&gt;&lt;/bar&gt;
      &lt;!-- stuff --&gt;
      &lt;!-- stuff --&gt;
      &lt;!-- stuff --&gt;
      &lt;bar&gt;&lt;/bar&gt;
      &lt;!-- stuff --&gt;
      &lt;bar&gt;&lt;/bar&gt;
      &lt;!-- stuff --&gt;  
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;style lang="scss" scoped&gt;
    @media (max-width: 1300px) {
      // this selector doesn't work, but it would be nice if it did
      bar {
        display: none;
      }
    }
  &lt;/style&gt;
  </code></pre>
  
  <p>I would like to hide the bar elements when the screen is 1300px or narrower. It would be nice if there was a <code>bar</code> element selector, just like there are <code>p</code> and <code>h1</code> element selectors. However, there doesn't seem to be, and I have to add <code>class="bar"</code> in order to select them.</p>
  
  <p>My question is if there is a cleaner way to select the <code>bar</code> elements.</p>
  
  <p>It wouldn't be good to add the CSS code inside of the <code>bar</code> component because when the <code>bar</code>s are used inside of other components, I <em>don't</em> want to hide them at all.</p>