Aurelia Replaceable Parts & HTML Only Templates

When you need dynamic content in a slot, you really need a replaceable part.

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 attributes.

1<template bindable="heading, bodyText">
2  <h1>${heading}</h1>
3  <p>${bodyText}</p>
4</template>

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

1<template>
2  <require from="./my-element.html"></require>
3  <my-element
4    heading="This is the heading"
5    body-text="This is the bodyText"
6  ></my-element>
7</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):

1<template>
2  <h2>This is a component with replaceable parts.</h2>
3  <template replaceable part="repl">This part is replaceable.</template>
4</template>
5[/code] To replace the `replaceable` template part, you would include a template
6tag within your custom element component and specify the `replace-part`
7attribute. Example: ```html
8<template>
9  <require from="./comp.html"></require> <comp></comp>
10  <comp>
11    <template replace-part="repl"> This part is being replaced. </template>
12  </comp>
13  <comp>
14    <template replace-part="repl">
15      <iframe
16        width="560"
17        height="315"
18        src="https://www.youtube.com/embed/dQw4w9WgXcQ"
19        frameborder="0"
20        allowfullscreen
21      ></iframe>
22    </template>
23  </comp>
24</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.