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
This renders the header and footer of our view.
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.
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.