Aurelia custom attributes are similar to value converters, binding behaviors or custom elements. They are a category of view source. Custom attributes have the ability to add or alter the behavior of any DOM element.
Aurelia has simple APIs that creates custom attributes of all types accompanied by strong databinding capabilities that only requires it to be added to a DOM element or set a required value for its attributes. It may be simple value or complex set of options.
Now let’s try to create an example. As said earlier, a custom attribute is able to alter the behavior of an element simply by adding it to the element.
In this example, we made the HTML to display a 100 pixel square with a red background. Note that the attribute class name is RedSquareCustomAttribute and is contained with Aurelia convention. The class is in “init caps” format so Aurelia converts it to “dash-case” to use in HTML thus becomes red-square.
You also have the option to override the default naming system by the use of @customAttribute decorator. Provide the exact desired name the your custom attribute just like the example below.
Note that Aurelia does not utilize the conversion from ‘init caps’ to ‘dash-case’ when this decorator is used. The exact value from the decorator is passed.