Merge common class names of component and root element of that component

[jimut]

What problem does this feature solve?

It looks a little awkward if there are duplicate class names in a DOM element.

What does the proposed API look like?

If you look into this fiddle.

The div element of foo component will have two bar classes in it. So it looks like.

<div class="bar bar"></div>

If the two classes would have been merged into one.

<div class="bar"></div>

It would have worked and behaved exactly in the same way but the code will look a lot cleaner.

[astronomersiva]

I am working on this.

Update: I have created a PR at #8035.

[Mushr0000m]

I have the same issue. I need to keep the class in the component because it make sense for the component to know it's own class name for style etc..

But also need to keep the class attribute on the component call because it's a wrapper component around some server side generated content (header and footer), so without this class I have a glitch while Vuejs mount the component with the class name and so the browser doesn't apply the css.

I tried to look in beforeMount or mountedto remove duplicates but can't find a way. I know it works anyway, but the double class name looks weird, so if you know a solution to remove this, it would be nice.