aurelia Custom Elements HTML Only Custom Element With Bindable Parameters
Example
In the following, we are creating an example of an Aurelia Custom Element which will allow you to display Youtube videos via their video ID.
An Aurelia Custom Element can be defined in two different ways:
the first one is by creating a viewmodel and accompanying view, the second one is by just creating a basic HTML file and using the bindable property on the <template> tag of the view itself.
For our example below, an HTML-only Custom Element makes sense as we are just making it easy to use Youtube embed code in our application.
Example: youtube.html
<template bindable="videoId">
<iframe width="560" height="315" src="https://www.youtube.com/embed/${videoId}" frameborder="0" allowfullscreen></iframe>
</template>
The filename for an HTML-only Custom Element is what will be used as the tag name in our HTML. Therefor, ensure that you don't call it something generic like header.html, footer.html or any other name that is a native HTML element already.
Using it:
<template>
<require from="./youtube.html"></require>
<youtube video-id="C9GTEsNf_GU"></youtube>
</template>
