This argument doesn't stop a myriad of widely used JavaScript frameworks that rely on custom attributes. Besides, if you really care about validity, you can use

  <div data-my-block="my-element my-modifier">

It's still shorter, more readable and avoids repetitions. The difference becomes even more pronounced as the complexity of your styling goes up.

My argument about the attribute is not invalid because they are doing it the wrong way. Custom attributes for HTML should make use of the data attribute, as you point out. One could use data attributes in such a way, I have, but in the past it was something to avoid due to performance issues.

To be fair, I don't know the latest performance figures on attribute selection.

>My argument about the attribute is not invalid because they are doing it the wrong way.

The problem with this argument is that just a few years ago everything ReactJS does now was the wrong way, but for some reason today, it's the best way. So which is it?

It seems to me, that unless it's broken, or goes against an explicit rule from the browser/code designers of html/css etc... it's totally valid. And if it doesn't "feel correct", then maybe it's a trend waiting to happen. <sigh>inline javascript styles</sigh>

What was ReactJS doing a few years ago that was wrong then but correct now? Since I don't know what that is, did the spec change during that time?

As far as I know right now, custom attributes goes against the html standard.

>What was ReactJS doing a few years ago that was wrong then but correct now?

Inline styles for one... created with javascript no less. This was totally verboten not long ago. But then became a "best practice" only because React started doing it.

I disagree, inline styles is never a "best practice" no matter what the reason or who does it. It happens from time-to-time due to necessity, but that doesn't make it best practice. In this case, React is simply doing it wrong.