Dynamic Component Syntax Is Case-Sensitive

[cooperwalbrun]

Describe the bug

When using Svelte 5's dynamic component syntax, it appears that Svelte only honors the component tag in the template if the name it references is capitalized. If the name is not capitalized, the component is simply not rendered (and there is no error message that I can see, either).

I am new to Svelte 5, so if this is intended behavior, could someone point me to where this is mentioned in the documentation? I ended up finding this page in the existing documentation, and it talks about the dynamic component use case, but it does not say anything about the casing requirement (if such a requirement exists).

Reproduction

I created a repository using the SvelteKit CLI (minimal options chosen) to reproduce this error. The repository is here, and the reproduction can be seen in this file (note the comments).

I have been able to reproduce this behavior in non-SvelteKit projects, too.

Logs

No response

System Info

-

Severity

annoyance

[brunnerh]

This works as intended. See the section on tags in markup:

A lowercase tag, like <div>, denotes a regular HTML element. A capitalised tag or a tag that uses dot notation, such as <Widget> or <my.stuff>, indicates a component.

The support for dot notation with lowercase names was recently added to better support dynamic components from variables.

[cooperwalbrun]

@brunnerh Thanks for the link. I am surprised that the lowercase syntax is tolerated in the dot notation case, as I can see others in the future having the same question I had (i.e. assuming dotless syntax and dot syntax behave uniformly). I will make a note about it in my project documentation for now.

[brunnerh]

You don't have to use that, it's also a bit redundant in my opinion. You can usually use @const or other mechanism to put the component into an uppercase variable.

The mechanism could be thought of as a similar one to web-components which require a - in the name to differentiate them from regular elements.