Dynamically add custom component to loaded DOM (aurelia.js)

Is it possible to add a custom component to the DOM once it has already been loaded?

E.g. When clicking a button

Template

<template>
    <button click.delegate="add_component()"> Press me </button>
</template>

Viewmodel

@inject(Element)

export class App {

  constructor(element) {
      this.element = element;
  }

  function add_component() {
     var component = document.createElement('<customElement></customElement>');
     this.element.appendChild(component);
  }
}