Aurelia - the 5 hour hyphen search

One of my first custom components had a bindable property named entityId. So I had

  import {bindable} from 'aurelia-framework';

  export class MyFirstCustomElement {
    @bindable entityId;
  }

Then, in my html, I was using it as:

  <my-first entityId.bind="entity"></my-first>

And (if you know the answer you already know this), it didn't work.

I spent 5 hours. Finally, I literally stripped the code down to just the bare example from the Aurelia docs, and it worked fine. I then added one small piece at a a time back into the element until I had the full capabilities of my intended element, and everything worked fine! Now I was really frustrated.

Then I noticed that, in going back to the example, I had changed the attribute name from entityId to "to", the value in the Aurelia example. Quickly, I changed the attribute name and bindable property, and lo and behold, the component stopped working.

If you will forgive a small religious sidebar, I leaned back, prayed for a moment, and then remembered something I had read somewhere back about the conventions that Aurelia provides, and that one of them was to convert camel case to hyphen- (or snake-)case. I changed the attribute to read:

  <my-first entity-id.bind="entity"></my-first>

and, of course, it all worked.

Wondering what might be up, I posted a comment on the Gitter channel, https://gitter.im/Aurelia/Discuss, and almost immediately I was presented with the explanation from PWKad: HTML doesn't like upper case in attribute names, so Aurelia does just this very conversion for you.

Having spent 5 hours trying to understand why this was happening, I thought I should blog the answer so that maybe someone else will find it here in less time.