Does Aurelia have virtual elements?

Question

Knockout JS has the concept of virtual elements. These are "headless" elements which you can bind to that do not have an HTML element as a container. This allows you to bind arrays in a container that emits no outer HTML.

For example, in Knockout JS you can do something like:

<!-- ko foreach: items -->
  <li data-bind="text: $data"></li>
<!-- /ko -->

A series of li tags will be emitted without a parent element.

Does Aurelia offer something similar? I do see you can create custom elements in Aurelia which can be bound, but these custom elements are emitted to the DOM as HTML elements.

For example, in Aurelia you can do something like:

<foo repeat.for="item of items" foo.bind="item"></foo>

However, this will emit foo element tags. How do you accomplish something like this in Aurelia without the unwanted parent element tags?

Answer 1

Thanks to James Thorpe for pointing me in the right direction. Aurelia added a @containerless attribute which you decorate your custom element class with. When you do it renders without the container.

Example:

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

@customElement('foo')
@containerless
export class Foo {
}