I have been searching a lot for a good approach, also reading this thread and some others and I would vote for using hyphens.
They are used broadly in ARIA ( https://developer.mozilla.org/de/docs/Web/Barrierefreiheit/ARIA ) which can be seen in many source codes and are therefore common. As already pointed out here, they are certainly allowed, which is also explained here: Using - in XML element name
Also as a side benefit: When writing HTML in combination with CSS, you often have classes whose names use hyphens as separator by default as well. Now, if you have custom tags that use CSS classes or custom attributes for tags that use CSS classes, then something like:
is more consistent and reads - in my humble opinion - much nicer than:
