This site runs best with JavaScript enabled.

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.

Discuss on TwitterEdit post on GitHub

Share article
Dustin Davis

Dustin Davis is a software engineer, people manager, hacker, and entreprenuer. He loves to develop systems and automation. He lives with his wife and five kids in Utah.

Join the Newsletter



Dustin Davis