Interaction with class and style properties

[KingSora]

What problem does this feature solve?

Currently the user isn't able to control the class and style properties of a component.

Example:
As a library author I want that my component has a static class and no style at all.
The component template looks like this:

<span class="the-only-allowed-class">Some content</span>

Someone decided to use this component and does this:

<component class="class-set-by-user" style="background: red"></component>

Now the component has two classes class="the-only-allowed-class class-set-by-user" because vue does a merge behind the scenes. As a component author I have basically no control over the class (and also the style) property.
I can't read the set class or style property, I can't prevent them to be set, I can't watch them so that I could somehow act after they were set. I can basically do nothing about it.
Thats what this feature request shall solve.

In comparison, libraries like React and Angular have such a feature.

What does the proposed API look like?

Don't handle the class and style property like something special. Just handle them as normal properties. Make them watchable inside the watch object. Make them (somehow) readable with exposing them in the $attrs object. etc.

[posva]

As said at #11244 (comment), in Vue 2, use a custom prop to retrieve classes and have full control over it.

Don't handle the class and style property like something special. Just handle them as normal properties.

This is a breaking change and won't happen in Vue 2. Vue 3 already has a solution: vuejs/rfcs#137. It will be appreciated if you could check it and see if it help you and if it doesn't, indicate what would be needed

[KingSora]

To me it seems like youre not even interested in improving the behavior in the current Vue 2.x version. The fix doesn't have to be a breaking change, it could also be a workaround for example.

[sirlancelot]

The core team are hard at work on v3. I wouldn't expect new features to land on the v2 branch from them as a result. I bet if you were able to find a non-breaking way to implement your feature, they'd be more amenable to considering it as PR. With my limited knowledge of Vue's core though, I don't expect this feature to be possible without introducing backwards compatibility issues.

[KingSora]

@sirlancelot A non-breaking way to implement this feature(s) would be possible. There was also a pretty similar issue in the past: #11132 and there it wasn't immediately closed as in my case.

Here are my suggestions:

1. Don't prevent the user from making props with the names class and style.
2. If the user makes props with this names, they don't merge automatically anymore (the user has to do it manually)
3. If the user makes props with this names, they are observable within the watch object.

In this way this wouldn't be a breaking change, because you only introduce new functionality.
To make this possible you could also use a falg like enableClassAndStyleProps (as suggested in #11132) which makes it easier for Vue to detect, that the user whishes to handle the class and style properties by himself and doesn't want automatic merging and other special Stuff Vue does behind the scenes with these values. This flag would also enable the declaration of the props, so you have to set it explicitly to true so that you can declare a class and style prop.

Maybe also worth a read for @posva