Aurelia Custom Elements Part 1

In the last section, we talked about custom attributes. This time, we will go through Aurelia custom elements.

This section gives an overview on Aurelia custom elements. Aurelia can add components dynamically. A single component can be used on various parts of your application without the need to write multiple HTML files. It does this by creating a view template in a HTML file and then requiring it to another Aurelia view template.

Here’s an example named custom-component.html

aurelia custom elements

This renders the header and footer of our view.

aurelia custom elements

Then here lies the custom component that has the <require> tag.

Note that when requiring an HTML only custom element in a view, .html extension must be included. Also, a bindable properties for an HTML only custom element is available by adding a bindable attribute and separating the list with commas within the <template> element.

aurelia custom elements

Aurelia custom elements are simply paired JavaScript and HTML that has the same name and does contain an element <template> tag. The standard naming for custom element view-model classes is that CustomElement has to be appended at the end of the class name. Then Aurelia strips the CustomElement from the end then converts the ‘init caps’ format to ‘dash-case’ for the custom element’s name. Here’s an example SecretMessageCustomElement:

aurelia custom elements

Keep in mind that it is possible not to match the custom element name and the filename. So it is recommended to name your custom element files to match the custom element names.

Also notice that Aurelia custom elements is not allowed to self-close. Meaning that <secret-message> won’t work unless a closing tag is provided. 

In the second part of this Aurelia custom elements series, we will have a deeper look at custom elements and decorators that can be used for further customization.

Subscribe Now and Upgrade Your Skills Today!
Sign up now and have the latest tech tutorials delivered straight to your mailbox.

PLUS: Get exclusive member-only discounts (up to 80% OFF!!) on our top tech courses in Udemy!
We hate spam. Your email address will not be sold or shared with anyone else.