Valid characters in custom data- attribute name in HTML5

Question

I'm creating some custom data-* attributes in my site and I am having a hard time reading the Spec Here and Here.

I can tell [a-z], [0-9] and '-' are allowed but I can't decipher anything more from that.

I also think "A-Z" will automatically converted to lower ( Spec link 1) before being processed but it mentions not using them. ( Spec link 2)

Questions:

1) What characters are allowed and not allowed in a custom data-* attribute?

2) Are special characters like '_', '!', '$', etc. allowed?

Thanks.

Answer 1

From your spec link 2, the allowed characters come from the Name production in XML, which is, given that the attribute already starts with data-

":" | [A-Z] | "_" | [a-z] | [#xC0-#xD6] | [#xD8-#xF6] | [#xF8-#x2FF] | [#x370-#x37D] |
[#x37F-#x1FFF] | [#x200C-#x200D] | [#x2070-#x218F] | [#x2C00-#x2FEF] | 
[#x3001-#xD7FF] | [#xF900-#xFDCF] | [#xFDF0-#xFFFD] | [#x10000-#xEFFFF] | "-" |
"." | [0-9] | #xB7 | [#x0300-#x036F] | [#x203F-#x2040]

_ is explicitly listed as OK

! (#x21) and $ (#x24) are not allowed

Spec link 1 is irrelevant. That's for user-agents, to describe how the characters should be processed, regardless of whether they are valid or not.