CODEWITHSUNDEEP
html
Kirill
Kirill

Reputation: 301

Does a custom attribute on a custom tag need the data-* prefix?

I know that custom tags need to have a "-". And I kwnow that custom attributes need the "data-" prefix. But what about custom attribute on a custom tag? If I define a custom HTML tag/element, such as <x-sososlik></x-sososlik>. And I need some custom attributes on it. For example: hair-color. Does that attribute need the data-* prefix?

<x-sososlik hair-color="green"></x-sososlik>

-or-

<x-sososlik data-hair-color="green"></x-sosolik>

The question is more about "what is the CORRECT way", because it works with both. I'm asking because I cannot find that information. I need to know it because I'm trying to shorten the attribute names on existing project, in the real code there a lot of them.

Upvotes: 1

Views: 470

Answers (1)

trincot
trincot

Reputation: 350137

No, you don't need to use the data- prefix on an autonomous custom element (as opposed to a customized built-in element). As specified in the WHATWG HTML standard:

Any namespace-less attribute that is relevant to the element's functioning, as determined by the element's author, may be specified on an autonomous custom element, so long as the attribute name is XML-compatible and contains no ASCII upper alphas. The exception is the is attribute, which must not be specified on an autonomous custom element (and which will have no effect if it is).

Upvotes: 1

Related Questions