Replace user element with template itself (and not include it in user element) in Aurelia?

Question

Let's say I have a custom <foo-bar></foo-bar> element <foo-bar></foo-bar> Instead of displaying the markup in the tags, I want to replace them so that the "foo-bar" element is no longer part of the DOM. I suppose Angular does this through the transclude property.

Is there any way to do this in Aurelia?

Answer 1

You need to use the containerless decorator on your component.

From the documentation Section for custom elements :

@containerless() - calls the visualization of the element view without the container of the user element that wraps it. This cannot be used in conjunction with @sync or @useShadowDOM . It also cannot be used with surrogate behavior.

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}!`); } }