title: Aurelia dynamically created custom elements without compose
body: <p>I understand the advantages and disadvantages of Aurelia's custom elements vs. <code>&lt;compose&gt;</code>; Jeremy Danyow's <a href="https://www.danyow.net/aurelia-custom-element-vs-compose/" rel="nofollow noreferrer">blog post</a> helps.  But, I would like to <a href="https://en.wikipedia.org/wiki/You_can&#39;t_have_your_cake_and_eat_it" rel="nofollow noreferrer">have my cake and eat it too</a>.</p>
  
  <p>I would like to create custom elements that I can also compose dynamically.  Since <code>&lt;compose&gt;</code> requires a different instantiation, to use it would mean that I would need to create two parallel versions of each element -- one for <code>&lt;compose&gt;</code> and one for static calls.  For example, consider the following use case:</p>
  
  <pre><code>&lt;template&gt;
    &lt;h1&gt;Welcome to the Data Entry Screen&lt;/h1&gt;
  
    &lt;!-- Static controls --&gt;
    &lt;my-textbox label="Your name:" value.bind="entry_name"&gt;&lt;/my-textbox&gt;
    &lt;my-datepicker label="Current date:" value.bind="entry_date"&gt;&lt;/my-datepicker&gt;
  
    &lt;!-- Loop through dynamic form controls --&gt;
    &lt;div class="form-group" repeat.for="control of controls" if.bind="control.type !== 'hidden'"&gt;
      &lt;label class="control-label"&gt;${control.label}&lt;/label&gt;
      &lt;div&gt;
        &lt;compose containerless class="form-control"
          view-model="resources/elements/${control.type}/${control.type}" 
          model.bind="{'control': control, 'model': model, 'readonly': readonly}"&gt;
          &lt;/compose&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>With the following controls data:</p>
  
  <pre><code>controls = [
    {label: 'Entry Date', type: 'my-datepicker', bind: 'acc_entry_date'},
    {label: 'Code', type: 'my-textbox', bind: 'acc_entry_code'},
    {label: 'Ref', type: 'my-textbox', bind: 'acc_entry_ref'},
    {label: 'Description', type: 'my-textarea', rows: '3', bind: 'acc_entry_description'},
    {label: 'Status', type: 'my-dropdown', bind: 'acc_entry_status', enum: 'AccountEntryStatus'},
    {type: 'hidden', bind: 'acc_entry_period_id'}];
  </code></pre>
  
  <p>As you can see, I would like to use <code>&lt;my-textbox&gt;</code> and <code>&lt;my-datepicker&gt;</code> both statically and dynamically.  Custom elements definitely seem like the best approach.  However, I don't see how to accomplish this without creating two parallel components -- one designed as a custom element and one designed as a composable view/viewmodel.</p>