v-show should be !important

[codysherman]

Vue.js version

2.0.0-rc.7

Reproduction Link

http://codepen.io/codysherman/pen/qaArqJ?editors=1010

Steps to reproduce

Have an element already have an !important display trait, such as one of Bootstrap's 'visible-*' classes.

What is Expected?

Vue should hide the element based on the v-show.

What is actually happening?

Because v-show doesn't have an !important tag, it is overruled. In my opinion, in the event of a conflict, the tie should obviously go to Vue, as it is getting its logic dynamically. Angular's ng-show applies the !important tag for this reason.

[sylvainpolletvillard]

Please no. The !important level is already used in some components to purposely override Vue v-show behaviour. The current level as inline style is the most appropriate.

Just put the condition on your visible- class instead of using v-show. It makes no sense to have a hidden element with some visible- classes anyway.

[posva]

As @sylvainpolletvillard said, if you want to apply !important you should create a class for it.

[BrainBacon]

@posva v-hide does not apply a class to the element when hidden. If it did this would be a non-issue. Wouldn't a class have to be applied via v-bind? Seems like a contrived way to go about hiding an element and would make v-hide completely useless when doing responsive design in a popular css framework.

[posva]

v-hide doesn't exist but you can create your own using the v-show directive as a reference. You can even publish it to npm a post it here 😉
Yes, the class have to be applied with a v-bind

[BrainBacon]

@posva Sorry I meant v-show, sounds like I had a bit of a Freudian slip haha. That being said and expanding on what @sylvainpolletvillard said, is component overriding directives really something that should be widely supported? Seems to me something like that would be an edge-case that should be either handled by Vue's internal logic or some kind of decorator whereas something as common as responsive framework usage should be supported? I assume there's also a good reason why the directive doesn't apply a class for easy selecting, but I don't know enough to say what that is? Perhaps you can shed a bit of light on the reasoning?

[posva]

By applying classes I mean something like this:

<div :class="{hide: hide}"></div>

.hide {
  display: none !important;
}

Maybe a modifier to v-show can come in handy v-show.important=""

[sylvainpolletvillard]

It would still be !important vs !important. !important is the nuclear bomb of CSS specificity: there is nothing above it. Betting on a double !important conflict for the application layout is a terrible idea IMO.

I do not know the reasons why Bootstrap visible- classes use !important in the first place, but by making this decision, it implies that Bootstrap claims the priority on the element visibility state. Vue should not interfere in this priority war, otherwise we would have the opposite problem where a user wants to override the styles in CSS but can't because of Vue.

[BrainBacon]

@posva Yeah I understood what that meant. Like I said before I thought that seemed like a contrived way to do it and would defeat the purpose of having v-show for those that use responsive classes.

I'm remarking on the philosophy of the design choice. If the design is to allow components to override the show directive I argue that is a poor design choice if support for popular CSS frameworks is intended. This issue will return many times in the future from folks using responsive classes since it will simply look like v-show is not working.

I agree with @codysherman in that Vue should take precedence over something like a responsive class since the model should represent a more accurate picture of display intent.

[BrainBacon]

@sylvainpolletvillard correct me if I'm wrong, but wouldn't the !important modifier bound directly to the element like how v-show is currently implemented take precedence regardless? If we were talking about a class that was applied to the element then I think you would be right, but that's not the way Vue is implemented.

[LinusBorg]

I do not know the reasons why Bootstrap visible- classes use !important in the first place, but by making this decision, it implies that Bootstrap claims the priority on the element visibility state. Vue should not interfere in this priority war

I can agree to that, but:

otherwise we would have the opposite problem where a user wants to override the styles in CSS but can't because of Vue.

Statically overriding a dynamic decision of Vue with important in the CSS seems to be a strange idea was well.

I agree with @codysherman in that Vue should take precedence over something like a responsive class since the model should represent a more accurate picture of display intent.

I can agree to that but think we don't want to introduce this as a default behaviour as it would be a breaking change.

So we are left with @psova's suggestion of a modifier like v-show.important or telling people to build their own directive / use a class binding:

:class{'visible-xs': someCondition, hide: !someCondition}

[posva]

@sylvainpolletvillard correct me if I'm wrong, but wouldn't the !important modifier bound directly to the element like how v-show is currently implemented take precedence regardless? If we were talking about a class that was applied to the element then I think you would be right, but that's not the way Vue is implemented.

@BrainBacon Yes it will, because inline style has the highest specificity