What is the «data-role» attribute in the HTML templates for?

Magento 2 sometimes uses the «data-*» attributes instead of CSS clases.

The motivation is well described (for another software product, not Magento) here:

Why data?
They could simply use role as an attribute (like other frameworks do), but this would make the resulting HTML invalid. Therefore an data- is added to every attribute name.

Why not classes?
I thing the main reasion for that is, to separate view from logic as far as it is possible. In larger projects CSS and JavaScript are not written by the same person.

stackoverflow.com/a/16409520