HTML Data Key Camel Dash Transform

Convert a valid dataset key to an HTML data-* attribute name, inserting dashes before ASCII uppercase letters; dash-lowercase keys are rejected under DOMStringMap rules.

Description

Convert a valid dataset key to an HTML data-* attribute name, inserting dashes before ASCII uppercase letters; dash-lowercase keys are rejected under DOMStringMap rules.

A dataset property key and its HTML data attribute name use different spellings. Uppercase ASCII letters in a valid key become dash-lowercase pairs.^[1]

When to use this tool

Convert a valid dataset key to an HTML data-* attribute name, inserting dashes before ASCII uppercase letters; dash-lowercase keys are rejected under DOMStringMap rules.

Prepare the supplied key fields for this operation.
Compare the complete example with the representation used by your own input before carrying the result into another step.

How to use the tool and how it works

Enter key. Use the exact text syntax, units and index conventions explained below.
Run the tool. If input validation fails, correct the supplied fields before interpreting any result.
Read result.attributeName. Interpret false, null and empty lists using the distinctions below; they can be valid outputs.

Require a nonempty key with no dash immediately followed by lowercase ASCII and no forbidden attribute-name characters. Prefix data- and replace each uppercase ASCII letter by a dash followed by its lowercase form.^[2]

Input field	Meaning and representation	Accepted input
key	key.	Text; at most 8,192 UTF-16 code units, subject to the grammar above

Output field	Interpretation
result	Object containing the named outputs below.
result.attributeName	The attribute name value under the stated formula or text convention.

json

{
  "input": {
    "key": "userId"
  },
  "output": {
    "result": {
      "attributeName": "data-user-id"
    }
  }
}

Limitations and assumptions

This is the implemented restricted DOMStringMap name transform, without DOM mutation, Unicode case folding or general attribute validation.
All declared input fields are required and unexpected top-level fields are rejected. Numbers must be finite; lists are limited to 128 entries and ordinary text fields to 8,192 UTF-16 code units, with tighter limits where stated.
JSON text inputs must parse within bounded nesting and size limits. Numeric outputs outside the safe finite range are rejected; large exact integer results use decimal strings. Indexes and half-open spans are zero-based unless a rank is explicitly described as one-based.

Alternative or Complementary methods

For actual document behavior, inspect a parsed DOM and the relevant HTML algorithm. These tools transform supplied tokens, observations or coordinates; compare the browser result when parsing or layout matters.

References

HTML Standard: dataset name conversion — WHATWG
Tool behavior and example: HTML Data Key Camel Dash Transform — tool.io

Similar or alternative tools

HTML Data Name Dash Camel Transform
Convert a supplied HTML data-* attribute name to its dataset key using ASCII lowercase then dash-lowercase camelization; no Unicode case folding or DOM mutation.
custom element dash name requirement
Custom element names distinguish application-defined elements from built-in names.