Bug: Mark as complete. Style gets out of sync with checkbox.

[davesmith00000]

Not quite sure what's going on here. Maybe a fresh pair of eyes from @hobnob could help? 😅

Steps to reproduce:

1. Open the app.
2. Add a couple of items.
3. Complete the first item.
4. Mark all as complete (the little 'down' chevron).
5. Hit it again to 'uncomplete' them all.
6. Notice that everything is correct including the (removed) strikethrough - except - you can still see the green tick.

The dom and model appear correct - I may have overlooked something:

1. Reloading the page displays the items correctly (i.e. they were persisted in the 'all uncompleted' state).
2. Inspecting the dom during the editing shows that it is in the right state.

[hobnob]

The problem here is that although the checkbox is checked in the DOM, the browser doesn't see it as such.

The styling for the checkbox (actually a background image on the label) is defined in node_modules/todomvc-app-css/index.css (line 210) if it is checked. However the strikethrough relies only on the completed class on the parent li (line 223). The fix is relatively simple, the rules on line 223 need to be moved to the ruleset in line 210. However it might be worth trying to ascertain why the browser doesn't see the checkbox as checked, despite the correct DOM entry