title: How to apply classes to Vue.js Functional Component from parent component?
body: <p>Suppose I have a functional component:</p>
  
  <pre><code>&lt;template functional&gt;
      &lt;div&gt;Some functional component&lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>Now I render this component in some parent with classes:</p>
  
  <pre><code>&lt;parent&gt;
      &lt;some-child class="new-class"&gt;&lt;/some-child&gt;
  &lt;/parent&gt;
  </code></pre>
  
  <p>Resultant <code>DOM</code> doesn't have <code>new-class</code> applied to the Functional child component. Now as I understand, <code>Vue-loader</code> compiles <strong>Functional</strong> component against <code>render</code> function <code>context</code> as <a href="https://vue-loader.vuejs.org/guide/functional.html" rel="noreferrer">explained here</a>. That means classes won't be directly applied and merge intelligently.</p>
  
  <p>Question is - <strong>how can I make Functional component play nicely with the externally applied class when using a template?</strong></p>
  
  <p><em>Note: I know it is easily possible to do so via render function:</em></p>
  
  <pre><code>Vue.component("functional-comp", {
      functional: true,
      render(h, context) {
          return h("div", context.data, "Some functional component");
      }
  });
  </code></pre>