Aurelia Replaceable Parts & HTML Only Templates

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.

<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>
[/code] To replace the `replaceable` template part, you would include a template
tag within your custom element component and specify the `replace-part`
attribute. Example: ```html
<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.