Replace Custom Element with template itself (rather than including it inside the custom element) in Aurelia?

Question

Let's say I have a custom element <foo-bar></foo-bar> Rather than render the markup into the tags, I want to replace them so that the "foo-bar" element is no longer part of the DOM. I believe Angular does this via the transclude property.

Is there a way to do this in Aurelia?

Answer 1

You need to use the containerless decorator on your component.

From the documentation's Custom Elements Section:

@containerless() - Causes the element's view to be rendered without the custom element container wrapping it. This cannot be used in conjunction with @sync or @useShadowDOM. It also cannot be uses with surrogate behaviors.

So your component should look like this:

import {customElement, bindable, containerless} from 'aurelia-framework';

@customElement('say-hello')
@containerless()
export class SayHello {
  @bindable to;

  speak(){
    alert(`Hello ${this.to}!`);
  }
}