v143 · dom

i18n data-* Attributes

A practical use case for the relaxed DOM rules: data-* attributes whose names are written in the team's native language — data-名前, data-precio, data-название. Chrome 143 lets setAttribute, dataset, and querySelector all handle these consistently.

Feature detection: checking…

product catalog

Each product card is built with Unicode data-* attribute names. Select a language to read the attributes back via getAttribute.

→ Select a language and click "Read attributes".

dataset camelCase mapping

element.dataset converts hyphenated attribute names to camelCase. Unicode characters pass through unchanged — only hyphens trigger camelCase conversion.

live tester

Set any Unicode data-* attribute name and value, then read it back via both getAttribute and dataset.

→ Click "Set & Read".
// Unicode data-* attribute names via setAttribute (Chrome 143+)
const el = document.createElement('div');
el.setAttribute('data-名前', '商品A');
el.setAttribute('data-価格', '¥1,980');
el.setAttribute('data-在庫数', '24');

// Read back via getAttribute
el.getAttribute('data-名前'); // → "商品A"

// dataset uses camelCase conversion — hyphens only, Unicode unchanged
// 'data-名前' → dataset['名前'] (no camelCase transform)
el.dataset['名前'];           // → "商品A"
el.dataset['価格'];           // → "¥1,980"

// querySelector with CSS.escape
const escaped = 'data-' + CSS.escape('名前');
document.querySelector('[' + escaped + '="商品A"]'); // → element

see also