VueJS auto inherit Non-Prop Attributes, it's great for data-* attributes.

But we don't want to inherit "class" & "style" attributes to save our core-ponents from any layout change by any new developer.(Because we want all styling of ponent within it's style file)

There is inheritAttrs: false to avoid "non-prop attribute" inheritance but:

Note: this option does not affect class and style bindings.

So suggestions to avoid "class" & "style" inheritance in core ponent?

Update:

Suggested solution:

<template>
 <div ref="root" class="hello">Hi</div>
</template>

<script>
export default {
  mounted() {
   this.$refs.root.className = 'hello'
  }
 }
</script>

But suggested solution even plicated when depend on ponent's attributes:

Vueponent('my-feedback', {
        props: ['type'],
        data: function(){
            var vm = this;
            return {
                classes: {
                    'my-feedback-info': vm.type === 'info',
                    'my-feedback-note': vm.type === 'note',
                    'my-feedback-warning': vm.type === 'warning',
                    'my-feedback-success': vm.type === 'success'
                }
            };
        },
        template: `
                    <div class="my-feedback" :class="classes">
                        <slot></slot>
                    </div>
                `
    });

Update [20th May 2018]:

Got answer via VueJS's Chat channel -

Solved JSFiddle - /

Update [28th April 2021]