Imagine a scenario where I have a functional component:
<template functional>
<div>Some functional component</div>
</template>
Now, when I render this component within a parent element with classes:
<parent>
<some-child class="new-class"></some-child>
</parent>
The resulting DOM does not have the new-class applied to the Functional child component. Upon my understanding, the Vue-loader compiles the Functional component against the render function context, as explained here. This means that classes are not directly applied and merged intelligently.
So, the question arises - how can I ensure that the Functional component works well with externally applied classes when using a template?
Please note: I am aware that it is easily achievable through the render function:
Vue.component("functional-comp", {
functional: true,
render(h, context) {
return h("div", context.data, "Some functional component");
}
});