:class binding with better class awareness

[james0r]

Not sure if this is expected or commonly run into, but I ran into it today and thought it would be cool if it wasn't too much trouble to implement.

Description of problem:
Using vanilla JS, add a class to an element with a :class binding. Toggle the prop that the :class depends on and see that it no longer tracks the class state.

Demo:
https://codepen.io/James0r/pen/oNZKoeE

[danddanddand]

If you use object syntax it would work how you want since it first removes elements on false conditions then adds elements on true condition. https://codepen.io/danddanddand/pen/XWMvVYP

This is a bit weird but I'm not sure it's unexpected since you're manually adding it on and the condition is essentially adding it again. It's equivalent of going <div class="flex" :class="true && 'flex'"> which would result in <div class="flex flex">

[KevinBatdorf]

Alpine tries to respect existing classes, so if the class is manually added, it's not removed. You can use the object literal approach like danddanddand suggested