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!<\/p>\n
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.<\/p>\n
Now, HTML-only custom elements bring us some good and some bad news.<\/p>\n
The good news\u00a0is 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:<\/p>\n
\r\n\/\/my-element.html\r\n<template bindable="attributeOne, attributeTwo, attributeThree ">\r\n\u2026.\r\n<\/template>\r\n<\/pre>\n\n
<\/p>\n
You can then use it like that:\u00a0<\/p>\n
\r\n<require from=".\/my-element.html"><\/require>\u00a0\r\n<my-element attribute-one="someVar1" attribute-two="someVar2"><\/my-element>\u00a0\r\n<\/pre>\n\u00a0
\nYes, Aurelia does the conversion from camelCase to dash-case on its own all the time. That comes in handy.\u00a0\u00a0
\nOne 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.\u00a0
\n\u00a0
\nThe 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:\u00a0<\/p>\nThe HTML-only element:<\/p>\n