If you are already familiar with Aurelia and have worked with Aurelia 1, then HTML custom elements are not a new concept to you. If you’re starting out with Aurelia 2, they might be a new concept to you.
How HTML Only Custom Elements Looked In Aurelia 1
We have a custom element called user-info.html which accepts a user object through a bindable property called user and we display their name and email.
<template bindable="user">
<p>${user.name}</p>
<p>${user.email}</p>
</template>How HTML Only Custom Elements Look In Aurelia 2
The constraint of needing a template tag has been removed in Aurelia 2. It is now automatically handled for you by the framework, so now our HTML components look like this.
<bindable name="user" />
<p>${user.name}</p>
<p>${user.email}</p>Because there is no template tag, you need to create your bindable properties using the bindable element and the name property to specify what it should be called.
Just like Aurelia 1, the file name itself (in our case it is user-info.html) becomes the name of our HTML tag without the .html file extension. If we called it user-block.html our element would be referenced using that name instead.
Importing & Using It
You created a HTML only custom element in Aurelia, now what? Now, you import the component.
<import from="./components/user-info.html"></import> <user-info user.bind="user"></user-info>
If you want to follow along with a tutorial for creating a simple weather application in Aurelia which involves creating a HTML only custom element and importing it, I have a weather application tutorial here.
