custom attribute works only with element.getAttribute(“attribute”) but not “element.attribute”

Question

I have just noticed, that if I give a custom attribute to an html element, for example:

Answer 1

Only certain standard attributes are directly mapped to properties. This is not the defined behavior for non-standard (custom) attributes.

The forward compatible way of using custom attributes is to prefix them with data-.

Then they become available in HTML5 compliant browsers as:

element.dataset.custom_attr

But in legacy browsers, you'll still need to use .getAttribute().