[SkiFire13]

> use the DOM element value/textContent/checked/etc as the only source of truth

How do you manage redundant state? For example a list with a "select all" button, then the state "all selected"/"some selected"/"none selected" would be duplicated between the "select all" button and the list of elements to select.

This is the fundamental (hard) problem that state management needs to solve, and your proposal (along with the one in the OP) just pretends the issue doesn't exist and everything is easy.

[jdsleppy]

They could always fall back to storing a value in a hidden element in the worst case. All/some/none selected is often done with an indeterminate state checkbox https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/... that can represent all three states.

Maybe I don't understand the problem you are talking about.

[robocat]

As soon as you need to store some state elsewhere you can store it in another suitable form (there's often some state not visually represented). I seem to recall jQuery stored state on a POJO (plain old JavaScript object) within a JavaScript variable of an element.

[motorest]

> They could always fall back to storing a value in a hidden element in the worst case.

This approach sounds like it's desperately trying to shove a square peg through a round hole. Why would anyone choose to use an element, hidden or not, to store a value as an alternative to use a very pedestrian JavaScript variable?

[johnisgood]

Did you know you can have "stateful" UI without any JavaScript, using pure CSS and HTML? JS-less (Tor) websites use them.

I have implemented a fully functional, multi-state CAPTCHA using only HTML + CSS for state simulation, and PHP for real validation.

[athrowaway3z]

I don't think I understand your question, or its just a poor example.

Regardless of design pattern or framework; the state all/some/none of a list, should practically never exists as separately updated state variable. Whenever its required you need to derive it.

    noneSelected = !querySelectorAll("input:checked")

[liveafterlove]

That is just select with multi. And one can also have class vs id.

[SvenL]

A List of items could just contain checkboxes holding the state of selected/not selected. Then it’s a trivial query selector. To get every selected item or to know if every item is selected.