> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/web/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/web/browser/dom/type/element/attribute/dataset.md).

# data attributes

[🔰 HTML](/web/html.md) ⟩ [HTML Attributes](/web/browser/dom/type/element/attribute/attrs-vs-props.md) ⟩

{% tabs %}
{% tab title="📗 參考" %}

* JS.info ⟩ 
  * [Non-standard attributes, dataset](https://javascript.info/dom-attributes-and-properties#non-standard-attributes-dataset)
  * [Make external links orange](https://javascript.info/dom-attributes-and-properties#make-external-links-orange)
* [常見的命名規則 (Camel Case, Snake Case, Kebab Case)](https://blog.camel2243.com/2020/06/10/常見的命名規則camel-case-snake-case-kebab-case/)
  {% endtab %}

{% tab title="📘 手冊" %}

* MDN ⟩ HTMLElement ⟩ [dataset](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset) : [`DOMStringMap`](https://developer.mozilla.org/en-US/docs/Web/API/DOMStringMap)
  {% endtab %}

{% tab title="👥 相關" %}

* Element ⟩ 
  * [.attr()](/web/browser/dom/type/element/+ext/.attr.md) - get/set element's attributes.
  * [.showDataAttr()](/web/browser/dom/type/element/+ext/.showdataattr.md) - show "data-xxx" attribute compared with "dataset" property.
    {% endtab %}

{% tab title="💼 專案" %}

* [VStack/HStack](/web/css/layout/system/vstack.md#code)
  {% endtab %}
  {% endtabs %}

## Custom Attributes

{% hint style="info" %}
**Problem** with **custom attributes**: \
What if we use a non-standard attribute and later the standard introduces it and makes it do something? ... To avoid conflicts, there exist [data-\*](https://html.spec.whatwg.org/#embedding-custom-non-visible-data-with-the-data-*-attributes) attributes.
{% endhint %}

## dataset

{% hint style="info" %}
All **attributes** starting with “**data-**” are reserved for programmers’ use. They are available in the [**dataset**](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset) property.
{% endhint %}

| data-xxx attribute (⭐️ kebab-cased) | dataset property (⭐️ camel-cased) |
| ----------------------------------- | --------------------------------- |
| data-**about**="Elephants"          | dataset.**about** = "Elephants"   |
| data-**order-state**="new"          | dataset.**orderState** = "new"    |

{% tabs %}
{% tab title="dataset" %}

```javascript
const {log} = console;

/* -------- selector -------- */

// ⭐️ $(): select first element
function $(selector, parent = document){
  return parent.querySelector(selector);
}

/* -------- helper -------- */

// ⭐️ string.capitalize()
String.prototype.capitalize = function() {
    return this.charAt(0).toUpperCase() + this.slice(1);
};

// ⭐️ string.kebabToCamelCase()
// kebab case  | camel case
// aaa-bbb-ccc | aaaBbbCcc
String.prototype.kebabToCamelCase = function() {
    return this
      .split('-')
      .map((str, i) => (i === 0 ? str : str.capitalize()) )
      .join('');
};

// ⭐️ string.toDatasetPropName()
//    string is assumed to be in "data-xxx" format (kebab case)
String.prototype.toDatasetPropName = function(){                     
    return this                       // 'data-xx-yy-zz'
      .split('-')                     // ['data', 'xx', 'yy', 'zz']
      .slice(1)                       // remove 'data'
      .map((str, i) => (i === 0 ? str : str.capitalize()) ) // ['xx', 'Yy', 'Zz']
      .join('');                      // xxYyZz
};

// ⭐️ elem.showDataAttr('')
// show element's "data-xxx" attribute & property
Element.prototype.showDataAttr = function (dataAttr){
  const prop = dataAttr.toDatasetPropName();
  log(`${this.nodeName.toLowerCase()}.${prop} = '${this.dataset[prop]}'`);
  log(`${dataAttr}='${this.attr(dataAttr)}'`);
}

/* -------- ⭐️ data-xxx attribute -------- */

const div = $('[data-widget-name]');
div.showDataAttr('data-widget-name');
// div.widgetName = 'menu'
// data-widget-name='menu'
```

{% endtab %}

{% tab title="⬆️ 需要" %}

* String ⟩ 
* Element ⟩ [.attr()](/web/browser/dom/querying-elements/dom.md)
  {% endtab %}
  {% endtabs %}