Requiring custom element throws error in some cases.

[JoshMcCullough]

If you require a custom element by its non-lower-case filename, including the extension, the following error is thrown:

Using <require from="./Panel.html"></require> causes this error:

Unhandled promise rejection Error: 'Panel' is not a valid custom element name. Upper-case letters are not allowed because the DOM is not case-sensitive.(…)
(anonymous function) @ es6.promise.js:126
module.exports @ _invoke.js:5
queue.(anonymous function) @ _task.js:36
run @ _task.js:23
listner @ _task.js:27

Using <require from="./panel.html"></require> does not cause any error.
Using <require from="./Panel"></require> does not cause any error.
Using <require from="./panel"></require> does not cause any error.

Side note: Is listner a typo?!

[EisenbergEffect]

This is because and html only component has its element name derived from the file name and uppercase is not allowed because the DOM is case insensitive.

[JoshMcCullough]

Thanks Rob -- and thanks for Aurelia and all you do! :)

I had this discussion on the Aurelia Gitter as well. I'll say that I don't specifically care, since I'll just use lower case tag names any way, but the HTML spec does allow mixed case tag names, and simply converts to lower-case (as I'm sure you know): https://www.w3.org/TR/2014/REC-html5-20141028/syntax.html#syntax-tag-name

I felt like this error was very misleading, and especially since it's only applied in the case where I use the full file name. I would have expected <require from="./Panel"></require> to throw the same error, for consistency's sake.

In addition, and in accordance with the spec, I feel like Aurelia shouldn't enforce tag-casing, anyway. Maybe a warning would be reasonable.

If you want to follow the Gitter discussion, it starts here: https://gitter.im/Aurelia/Discuss?at=56cfb6d19a059be9245e41d2

[EisenbergEffect]

We put this error in place because we found that developers were confused by casings they were applying in code that didn't match HTML.

<require from="./Panel"> is different from <require from="./Panel.html>

The first uses the loader to require a view model. The view model then specifies the name of the element. So, there's no issue with that, since Aurelia converters view models to lower-case hyphenated forms. The second case requires an HTML which does not have a view model. So the only way to derive the element name is from the file name. The custom element system then complains that you've done something it doesn't like.

What I think we should probably do is add the same logic that we have which converts view model element configuration into the code that generates the HTML only component elements.

I'm re-opening this to track that.

[JoshMcCullough]

Ah, thanks for explaining! I get it now.