Aurelia dash in component name not working

Question

I have a basic Aurelia component and it looks like when I use dash in it's name, it doesn't work.

It works when I have it like this:

import {inject, customElement, bindable} from 'aurelia-framework';

@customElement('helloworld')
@inject(Element)
export class HelloWorldCustomElement {
    constructor(element) {
        console.log ('here')
    }
}

<helloworld></helloworld>

But it doesn't when is like this:

import {inject, customElement, bindable} from 'aurelia-framework';

@customElement('hello-world')
@inject(Element)
export class HelloWorldCustomElement {
    constructor(element) {
        console.log ('here')
    }
}

<hello-world></hello-world>

According to the Aurelia docs, it should work both ways: https://github.com/aurelia/templating/blob/master/doc/article/en-US/templating-custom-elements.md

Answer 1

I managed to find the cause for this. In app.html I had the following line and it appears that there was a naming conflict. Removing it fixed the problem right away.

<require from="hello-world/hello-world.html"></require>