Custom HTML Attributes
If you are familiar with HTML, and the valid attributes of most of the elements, you probably also know that if you provide an attribute that is not one of the official attributes of that element the browsers will disregard it.
What you might not know is that those attributes are still parsed and are still part of the DOM, the Document Object Model.
Let's see an example.
In the following HTML file we have an h1 element and some text. If you click on the 'try' link you'll be able to see how that is displayed in your brower. It shows the text within the h1 element with bigger letters, because that's what we expect from a header element.
<h1>Hello World</h1> <p>And include some text as well</p>Try!
We can add a style attribute and within that we can add CSS instructions. For example we can tell the browser to use smaller fonts for the h1 element:
<h1 style="font-size: 12px">Hello World</h1> <p>And include some text as well</p>Try!
This works because style is a known attribute of h1 and for that matter for every HTML element.
In the next example removed the style attribute and added a different attribute, called secret-sauce. If you open the html in a browser you'll see that the content of the h1 element returned to it original size, and you won't see any impact of the new attribute.
No warnings, no errors. That's because the browser simply disregards those attributes.
Attributes are in the DOM
Using document.getElementsByTagName we fetch the list of all the h1 elements in the document and the we use the index  to access the first such element. On that element we use the getAttribute method to access the value of the given attribute.
HTML5 defined a set of attributes using the prefix data- that get special treatment. They are not used by the browser, but they, (the broswers) provide access to them through special syntax. The objects representing the HTML tags that we retreive from the DOM of modern browsers have a standard attribute called dataset that provides access to all the data-* attributes as in this example:
Another issue with this special syntax is that Internet Explorer started to support this only in version 11. For older version you'll still have to use the regular getAttribute syntax.
For further examples check out the guide from Mozilla.
ng-* custom attributes used by AngularJS
AngularJS uses the ng- prefix for all the custom attributes. This makes it clear to the reader that something is related to AngularJS.
Actually Angular will also work with attributes using data-ng- prefix, in case you'd like to stick to the HTML specifications.
Published on 2016-08-31