How to apply classes to Vue.js Functional Component from parent component? : <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>
