Ich habe beschlossen, fast die gesamte Benutzeroberfläche zu implementieren, indem ich einfach CSS-Klassen hinzufüge und entferne, und CSS-Übergänge verwende, wenn ich einen Übergang animieren möchte.
Ein großer Teil des JavaScripts auf Websites (die nicht ansonsten vollständig aus JavaScript bestehen) besteht darin, auf das Ding klicken, die Klasse umschalten – deshalb war jQuery so gut und Bibliotheken wie Alpine.js finden eine glückliche Entwicklergemeinschaft.
Ich habe einmal einen Screencast namens „Hey Designer, wenn ihr nur eine Sache über JavaScript wissen solltet, dann diese“ gemacht, der im Grunde lautete: Lernt, Klassen umzuschalten. Davon
Manchmal, um eine Reise in das Erlernen von etwas Großem und Komplexem zu beginnen, muss man etwas Kleines und Einfaches lernen. JavaScript ist groß und komplex, aber man kann es schrittweise erlernen, indem man kleine und einfache Dinge lernt. Wenn Sie ein Webdesigner sind, denke ich, gibt es eine Sache im Besonderen, die Sie lernen können und die äußerst wirkungsvoll ist.
Das ist die Sache, die ich Sie lernen lassen möchte: Wenn Sie auf ein Element klicken, ändern Sie eine Klasse auf einem Element.
Tolle Idee, aber in Ihrem Beispiel verwenden Sie Klassen, um Semantik festzulegen („done“).
Diese Art, den UI-Zustand in Klassen zu legen, funktioniert nicht gut für Leute, die mit der Tastatur navigieren (da die Klassenänderung – meistens – nur durch einen Mausklick oder Tippen auf einen empfindlichen Bildschirm ausgelöst wird) und bedeutet nichts für Screenreader wie NVDA (Non-visual display Assistant).
Da dieses UI-Verhalten im Display verborgen ist, werden die meisten Werkzeuge zur Barrierefreiheitsprüfung dies nicht als Barrierefreiheitsproblem erkennen.
Trotz ihrer Mängel und inneren Komplexität sind Web Components meiner Meinung nach der beste Weg, UI-Semantik zu speichern.