title: Aurelia binding a string to a template through a custom element
body: <p>I am trying to create a dropdown component that is easily reusable. I would like to know if it is possible to do something like so:</p>
  
  <pre><code>&lt;dropdown title.bind="Projects"&gt;&lt;/dropdown&gt;
  </code></pre>
  
  <p>Notice I am passing a string "Projects" not a JS object. Then my dropdown template have:</p>
  
  <pre><code>&lt;template&gt;
    &lt;li class="nav-item dropdown"&gt;
      &lt;a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"&gt;${title}&lt;/a&gt;
      &lt;div class="dropdown-menu"&gt;
        &lt;a class="dropdown-item" href="#"&gt;Action&lt;/a&gt;
        &lt;a class="dropdown-item" href="#"&gt;Another action&lt;/a&gt;
        &lt;a class="dropdown-item" href="#"&gt;Something else here&lt;/a&gt;
      &lt;/div&gt;
    &lt;/li&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>Of course I am not looping the dropdown-items in my demo code yet (future to do). Notice I am trying to use title like so <code>&lt;a&gt;${title}&lt;/a&gt;</code> in the template.</p>