I’ve been using Aurelia for over a year now. We have been working on a new live event dashboard and scheduler, which some big clients are beta testing now.

Yet, I continue to learn new things. Yesterday I learned two little template hacks that I think I will find useful in the future and now, hopefully you will too.

HTML Only Templates

So I figured you could have HTML only templates, but I haven’t really seen the need for them up to this point. Most often you will want a template that has some kind of bindable data. Well, did you know you can add bindables to templates without using a view-model?

I learned this tip from Dwayne Charrington‘s book Aurelia For Real World Applications (see chapter 7).

In your template tag, you can simply add the bindable attribute and pass in a comma separated list of bindable attrubutes.

<template bindable="heading, bodyText">
    <h1>${heading}</h1>
    <p>${bodyText}</p>
</template>

To use this template, you simply require it and pass in your attributes.

<template>
    <require from="./my-element.html"></require>
    <my-element heading="This is the heading" body-text="This is the bodyText"></my-element>
</template>

You can see a working example here.

Replaceable Parts

I talked about HTML only templates first so I could show the replaceable parts trick without the need of a view-model.

Sometimes you need to replace a whole section of content in a component. You can do this in various ways. Often I simply use the <slot> tag or some other method like <compose>.

But I recently learned about replaceable parts from a Pluralsight course by Brian Noyes.

If you want to have a section of your component that is replaceable you can add a template tag with a replaceable attribute and a part attribute. For example (comp.html):

<template>
  <h2>This is a component with replaceable parts.</h2>
  <template replaceable part="repl">This part is replaceable.</template>
</template>

To replace the replaceable template part, you would include a template tag within your custom element component and specify the replace-part attribute. Example:

<template>
  <require from="./comp.html"></require>
  <comp></comp>
  <comp>
    <template replace-part="repl">
      This part is being replaced.
    </template>
  </comp>
  <comp>
    <template replace-part="repl">
      <iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>
    </template>
  </comp>
</template>

Checking out a working example here.

Why Replaceable Parts instead of Slots?

From what I was told, replaceable parts was implemented because of limitations with the Shadow DOM slots spec. In most cases, using <slot> is cleaner and follows the Shadow DOM standard. But <slot> does not allow for dynamic content. Slots cannot be added or removed dynamically. So, you can’t place and if binding on a slot, but you can on a replace-part.