aurelia Creating A Custom Element Using the @customElement Decorator


Example

In most examples, the class naming convention is used to define an Aurelia Custom Element. However, Aurelia also provides a decorator that can be used to decorate a class. The class is again treated as a custom element by Aurelia then.

The value supplied to the decorator becomes the name of the custom HTML element.

Example: my-element.js

import {customElement} from 'aurelia-framework';

@customElement('robots')
export class MyClass {

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

Using it:

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

    <robots></robots>
</template>