"class" and "style" attributes have no effect on functional SFC components

Version

2.5.16

Reproduction link

https://github.com/padcom/vue-functional-no-class-passed

Steps to reproduce

• Clone the repository
• npm install
• npm start
• Open http://localhost:4000

What is expected?

Functional component is painted in green/red by applying the items CSS class and color: red style

What is actually happening?

The items CSS class nor style is not applied

---

I am mostly using the added class in components for BEM-style annotations where a component is at the same time an element from the point of view of the container and a block from its personal point of view thus allowing me to delegate certain properties to the container, like positioning for example. I’d like to use that same principle in functional components, for example with transition-group that has the option to specify the tag attribute. It works with statefull components but functional components fail to pass the class and style properties when rendering.

Please note that the functional components declared in the example repository do contain the v-bind="data.attrs" and v-on="listeners" attributes on the root node as described in the documentation.

[padcom]

This would also work in an SFC but it is ugly:

<template functional>
  <div v-bind="data.attrs" :class="data.staticClass" :style="data.staticStyle">
    Functional component
  </div>
</template>

[padcom]

I think I have it! SFC’s seem to be very powerful and that I like very much:

<script>
export default {
  functional: true,
  render: (h, { data, children }) => (
    <transition-group { ...data} tag="ul" name="slide">
      { children }
    </transition-group>
  )
}
</script>

<style>
.slide-move {
  transition: transform 1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
</style>

That is very elegant 😃