Allow class as valid component prop

[fastfedora]

What problem does this feature solve?

It allows for proper encapsulation of components. Currently the class and style props cannot be intercepted or prevented from being injected into the root element of a component. This prevents the ability to refactor components without requiring the calling code to be changed.

For example, assume a Logo component which is used with a class attribute:

<my-logo class="app-logo" />

With the template:

<template>
   <img src="my-logo.png" />
</template>

Due to the merging of the class attribute the rendered tag will be:

   <img class="app-logo" src="my-logo.png" />

Now, let's assume we want to refactor this component so it lazily loads the image. Our new template is:

<template>
   <div>
      <my-loader v-if="loading" />
      <img v-else src="my-logo.png" />
   </div>
</template>

Now the class attribute is put on the div, which may not be appropriate. With good encapsulation, there would be a way to define class as a prop to intercept the value being passed in and render it on a different element than the root element, such as:

<template>
   <div> a
      <my-loader v-if="loading" />
      <img v-else :class="class" src="my-logo.png" />
   </div>
</template>

Currently, attempting to define class as a prop displays this warning on the console:

[Vue warn]: "class" is a reserved attribute and cannot be used as component prop.

While inheritAttrs can be set to false to disable most props from being passed through to the root element, it does not apply to class or style.

What does the proposed API look like?

Ideally simply allow class and style as valid Vue props that can be used to intercept the values passed in (that is, they don't pass through to the root element when these are defined as props).

If that is not possible for backward-compatibility reasons, add a flag similar to inheritAttrs that enables this functionality (e.g. enableClassAndStyleProps).

[posva]

This would be a breaking change for Vue 2 so it won't happen, but it already works that way on Vue 3 when declaring a prop named class.
I personally don't think it is worth adding yet, another option that goes with inheritAttrs to prevent class and style from falling through, but let's see what other people feedback is

[geongeorge]

You can make the other case of having to inherit class and style props to the component root element as a feature.
This is not worth breaking the code

[fastfedora]

Since it works correctly in Vue 3, we can just wait until that version.