Polluting the HTML post page load

[vladdeSV]

The mantra is to keep the HTML clean when developing; "non-intrusive". Less attributes to remember, the better.

However, when the page loads in userland, it doesn't really matter what goes on in the DOM – a normal user will never notice as long as it's working.

Curve-ball: This is related to #1 and #7. Imagine after the page loads, the JS tags all inputs that are swipeable. The CSS could become as simple as:

[data-checkswipe] input[type=checkbox][data-checkswipe-use]

For ease of use, if no checkboxes within have the attribute data-checkswipe-use, then the JS adds that to every single checkbox it can find within. If there is even a single checkbox with that attribute, no checkbox gets that attribute added by the JS.

Sounds great, but now "in run-time" the DOM has these extra attributes added to them. In practice this doesn't really do anything, but I don't like it.

[vladdeSV]

If I could use :has(), I could use

[data-checkswipe]:not(:has(input[type=checkbox][data-checkswipe-use])) input[type=checkbox],
[data-checkswipe] input[type=checkbox][data-checkswipe-use] { ... }

... and then in the JS I could check if any checkboxes had a tag data-checkswipe-use, and if so only add listeners to those; otherwise add listeners to all checkboxes.

[vladdeSV]

The idea to tag all handled inputs in the DOM still makes me go 🤮