The data-*
attributes have two advantages:
- It is a convention meaning other programmers will understand quickly that it is a custom attribute.
- You get a DOM Javascript API for free: HTMLElement.dataset. If you use jQuery, it leverages this to populates the keys and values you find with
.data()
.
The reason for the -
in custom element names is for two basic reasons:
- It is a quick way for the HTML parser to know it is a custom element instead of a standard element.
- You don't run into the issue of a new standard element being added with the same name which would cause conflict if you register a custom Javascript prototype for the DOM element.
Should you use your own custom element name? Right now it is so new that don't expect it to be fully supported. Let's say it does work. You have to balance the issue of the extra complexity with the benefit. If you can get away with a classname, then use a classname. But if you need a whole new element with a custom Javascript DOM prototype for the element, then you may have a valid usage of it.