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.
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.