I decided to implement almost all of the UI by just adding & removing CSS classes, and using CSS transitions if I want to animate a transition.
An awful lot of the JavaScript on sites (that aren’t otherwise entirely constructed from JavaScript) is click the thing, toggle the class — which is why jQuery was so good and libraries like Alpine.js are finding happy developer audiences.
I once did a screencast called “Hey designers, if you only know one thing about JavaScript, this is what I would recommend“ which was basically: learn to toggle classes. From that:
Sometimes, to start a journey into learning something huge and complex, you need to learn something small and simple. JavaScript is huge and complex, but you can baby step into it by learning small and simple things. If you’re a web designer, I think there is one thing in particular that you can learn that is extremely empowering.
This is the thing I want you to learn: When you click on some element, change a class on some element.
Great idea, but in your example you use classes to set semantics (“done”).
This way of putting the UI state into classes doesn’t work well for people which use keyboard to navigate (because the class change is -mostly- triggered only by a mouse click or tap on a sensitive screen). and does not mean anything for screen readers like NVDA (Non-visual display Assistant).
Because this UI behavior is hidden into the display most accessibility check tools will fail to detect it has an accessibility breaker.
Despite their flaws and inner complexity, web components are IMHO the best way to store UI semantics.