Добавление переменных в элементы DOM

Я хотел бы спросить, если "законно" добавлять пользовательские переменные для документирования элементов тела. Например:

document.getElementById('elem1').customVariable = 'xxx';

Этот код работает, но я не знаю, разрешено ли ему

Он не отображается в списке аргументов тега, но переменная может использоваться в дальнейшем коде.

Я думаю, что это сработает, но более распространенный способ добавления настраиваемого атрибута выглядит следующим образом:

<div id="elem1" data-customVariable="foo"

И затем

document.getElementById('elem1').setAttribute("data-customVariable", "bar");

Или, если более старый браузер захлопнется на setAttribute

document.getElementById('elem1')["data-customVariable"] ="bar";

ИЗМЕНИТЬ

Спасибо pimvdb за то, что вы также можете сделать

document.getElementById('elem1').dataset.customVariable ="bar";

Просто отметьте, что вам нужно будет посмотреть, как вы это называете - корпус верблюда может выбросить его. Вы захотите

<div id="elem1" data-custom-variable="xxx"></div>