Prefer using .dataset on DOM elements over calling attribute methods

💼 This rule is enabled in the ✅ recommended config.

🔧 This rule is automatically fixable by the --fix CLI option.

Use .dataset on DOM elements over getAttribute(…), .setAttribute(…), .removeAttribute(…) and .hasAttribute(…).

Fail

const unicorn = element.getAttribute('data-unicorn');

element.setAttribute('data-unicorn', '🦄');

element.removeAttribute('data-unicorn');

const hasUnicorn = element.hasAttribute('data-unicorn');

Pass

const {unicorn} = element.dataset;

element.dataset.unicorn = '🦄';

delete element.dataset.unicorn;

const hasUnicorn = Object.hasOwn(element.dataset, 'unicorn');

const foo = element.getAttribute('foo');

element.setAttribute('not-dataset', '🦄');

element.removeAttribute('not-dataset');

const hasFoo = element.hasAttribute('foo');