Aurelia - 在视图模型中动态创建自定义元素

我有一个Aurelia应用程序，用户可以在其中单击一个按钮并创建一个新标签。用户单击按钮之前，该选项卡及其内容（自定义元素）在页面上不存在。我在运行时（通过Javascript）在视图模型中为内容生成HTML。

我不断看到使用模板引擎compose或enhance函数的提法，但都不适合我。我不知道如何使用<compose>元素（在HTML中），因为我是基于用户单击按钮创建元素的。

我的想法是，按钮具有click.delegate一个功能，该功能最终会完成类似

const customElement = document.createElement('custom-element');
parentElement.appendChild(customElement);

const view = this.templatingEngine.enhance({
  element        : customElement,
  container      : this.container, // injected
  resources      : this.viewResources, // injected
  bindingContext: {
    attrOne: this.foo,
    attrTwo: this.bar,
  }
});

view.attached();

但是，所有这些操作只是创建一个HTML元素，<custom-element></custom-element>而没有实际绑定任何属性。

如何创建类似于<custom-element attr-one.bind="foo" attr-two.bind="bar"></custom-element>Javascript 的自定义元素？