aurelia Custom Elements Creating A Custom Element Based On Naming Conventions

Example

A basic custom element is created in Aurelia based on naming conventions, by simply adding the suffix CustomElement to the name of a class. This suffix will automatically be stripped out by Aurelia. The remaining part of the class name will be lowercased and separated using a hyphen and can then be used as the element name.

Example: my-element.js

export class SuperCoolCustomElement {

}

<template>
    <h1>I am a custom element</h1>
</template>

Using it:

To use the newly defined custom element, at first, the tag name needs to be retrieved from the class name. The CustomElement suffix will be stripped out and the remaining part (SuperCool) will lowercased and separated by hyphen on each capital letter. Hence, SuperCoolCustomElement becomes super-cool and forms the basis of our element.

<template>
    <require from="./my-element"></require>

    <super-cool></super-cool>
</template>

Worth noting is that our example above is a bit contrived. We could have just created a HTML-only Custom Element and not create a viewmodel at all. However, the viewmodel approach approach allows you to provide bindable properties to make your element configurable (as shown in other examples).