title: Vue.js: use CSS class for child element
body: <p>I have a component <code>v-popup.vue</code></p>
  
  <pre><code>&lt;template&gt;
    &lt;div class="overlay"&gt;
      &lt;div class="popup"&gt;
        &lt;slot&gt;&lt;/slot&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>and I want to style it from the parent, for example:</p>
  
  <pre><code>&lt;template&gt;
    &lt;v-popup class="custom-popup"&gt;
      Popup content
    &lt;/v-popup&gt;
  &lt;/template&gt;
  
  &lt;style&gt;
    .custom-popup {
      padding: 20px;
    }
  &lt;/style&gt;
  </code></pre>
  
  <p>How can I configure <code>v-popup.vue</code> component to make <code>custom-popup</code> class to be automatically added to <code>div.popup</code>, not <code>div.overlay</code> ?</p>