[frosted-flakes]

I've gone in the other direction and write plain HTML tags now (in React, or anywhere), then augment it with functionality by passing a reference to the relevant element to a helper class. Very much like A11yDialog[1], which is likely the most well-known example of this concept. The helper class is vanilla Javascript and the API of the class is the DOM itself: if you don't use the correct aria-x and role attributes, it will warn you.

I do this because I hate dealing with the opaqueness of UI components. Every one has its own completely different API, every one imposes unnecessary constraints, and styling them requires you to submit to whatever styling method the library author thinks is best. I just want to have direct control over the DOM dammit! without having some busybody middleman library getting in the way.

This approach makes it very easy to, for example, have a menu button and its menu in completely different parts of the tree, making styling effortless. The helper class handles focus management, so the exact HTML isn't important, as long as the correct attributes are present.

[1] https://a11y-dialog.netlify.app/