tag name must be two or more words joined by the '-' charactersvelte(invalid-tag-property)

[potatotomatobanana]

I'm getting this error, why?

tag name must be two or more words joined by the '-' charactersvelte(invalid-tag-property)

I know what it says and how to fix it, what I'm asking is, why? Why can't I name my web component however I like?

[baseballyama]

Please read below document.

https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#high-level_view

A string representing the name you are giving to the element. Note that custom element names require a dash to be used in them (kebab-case); they can't be single words.

[potatotomatobanana]

Sorry, I didn't find anything about why using two words and a - is necessary?

[baseballyama]

From the document.

require a dash to be used in them

This is specification. And it is not within the scope of this repository to discuss why a dash is required for custom elements.
But basically, the main reason is that browsers need to be able to clearly distinguish between native elements such as <div> and custom elements.