VueJS props - How can i avoid "class" attribute inheritance?

Question

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-components from any layout change by any new developer.(Because we want all styling of component 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.

https://v2.vuejs.org/v2/api/#inheritAttrs

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

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 complicated when depend on component's attributes:

Vue.component('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 - https://discordapp.com/channels/325477692906536972/325479107012067328

Solved JSFiddle - https://jsfiddle.net/53xuhamt/28/

Update [28th April 2021] 🎉

In Vue3, we could disable attribute inheritance via:

 inheritAttrs: false,

Vue3 Doc - https://v3.vuejs.org/guide/component-attrs.html#disabling-attribute-inheritance

Example - https://jsfiddle.net/awan/oz5fbm2k/

Like @Decade Moon, I think there is no proper way of doing it. I can imagine a way to do it, but it's not very clean, nor easy to maintain. In each or your child components, you could do this: mounted() { this.$el.className = 'only classes you want'; } — blex
– blex, Commented May 12, 2018 at 9:28
Even if you remove class and style attributes from a component's root element, that won't prevent styles from cascading into the component from parents. Just define all the style rules that you don't want overridden in the component and make sure that new developers don't use !important — Stephen Thomas
– Stephen Thomas, Commented May 12, 2018 at 12:31
@Awan nice to add the link to ypur solution. But please consider writing your own answer with explanation and code, instead of relying on external source which may be removed in the future. — ghybs
– ghybs, Commented May 20, 2018 at 17:01

danielkelly_io · Accepted Answer · 2019-08-27 19:13:01Z

4

Pretty hacky solution but this worked for me

data(){
   return {staticClass: ''}
},
mounted(){
   // Capture the classes and use them on nested elements where desired
   this.staticClass = this.$el.classList.toString()

   // Remove the classes from the root element
   this.$el.setAttribute('class', '')
}

answered Aug 27, 2019 at 19:13

danielkelly_io

614 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Decade Moon · Accepted Answer · 2018-05-12 08:55:49Z

0

You can't opt out of this behavior, unless it's a functional component.

answered May 12, 2018 at 8:55

Decade Moon

34.4k8 gold badges84 silver badges104 bronze badges

4 Comments

Awan Over a year ago

"class" seems not available in functional component's context - jsfiddle.net/awan/53xuhamt

Decade Moon Over a year ago

Class and style bindings are available in the vnode's data object under the properties class, staticClass, style and staticStyle, but only if they were set in the template. In your fiddle you have not specified any class or styles so they're absent in the vnode.

Awan Over a year ago

Basically, i am trying to skip class="testing" on root of "nsc-option", so "ignore-class" is write directive to handle that?

Decade Moon Over a year ago

nsc-option is not a functional component, so you can't prevent Vue from applying the testing class to the root element of that component (whatever that ends up being).

Collectives™ on Stack Overflow

VueJS props - How can i avoid "class" attribute inheritance?

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related