dataAttr

Define a single HTML data attribute.

This is a convenience method for creating a data attribute, which is identified by its "data-*" prefix.

For example, migrating the example at https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes#html_syntax

Modifier
  .dataAttr("columns", "3") // registers "data-columns"
  .dataAttr("index-number", "12314") // registers "data-index-number"
  .dataAttr("parent", "cars") // registers "data-parent"

To query a data value later through code, use the HTMLElement.dataset property (and note that names passed in using kebab case need to be queried using camel case).

element.dataset["columns"] // "3"
element.dataset["indexNumber"] // "12314"
element.dataset["parent"] // "cars"

Because data attributes can be queried this way, this method also supports taking in camel case names, which it converts to kebab case under the hood:

Modifier.dataAttr("indexNumber", "12314") // same as registering "index-number"

See also