Hi, everyone! We’re back to Aurelia and this time I’m going to show you how to build your own custom element just with HTML, without a view-model. Yes, that’s possible!

There are many advantages to an HTML-only element, like, first and foremost, not having to use a view-model at all! This is particularly useful when your custom element does not implement complex business logic but you just need a quick component for your applications.

Now, HTML-only custom elements bring us some good and some bad news.

The good news is that you can still add bindable custom attributes to your elements by adding them to the bindable attribute of the template element in a comma separated fashion:

//my-element.html
<template bindable="attributeOne, attributeTwo, attributeThree ">
….
</template>

You can then use it like that: 

<require from="./my-element.html"></require> 
<my-element attribute-one="someVar1" attribute-two="someVar2"></my-element> 

 
Yes, Aurelia does the conversion from camelCase to dash-case on its own all the time. That comes in handy.  
One thing you might have noticed in the example above is that, in order to use an HTML-only element, you also need to include the “.html” extension in your path. That happens mainly due to the absence of a view model. 
 
The bad news is that HTML-only custom elements do not support two-way binding by default. That means that, if you want two-way binding functionality, you need to explicitly state it. I will demonstrate this with a simple example as it can be very confusing to newcomers: 

The HTML-only element:

And how we can use it: