Because there are so many native elements to keep track of now.

If you see an unfamiliar tag that has a reasonably simple name, you simply don't know if it's native or for formatting.

That's confusing. It's taking two categories of things and mixing them so you can't tell them apart.

There's a very clear rule for it: if it contains a dash it's a custom element

Only native elements can be a single word, you can't create a custom elements without a dash.

Let's be clear: this whole conversation isn't about custom elements. This is about formatting. Not web components.

You just use it (single word) and style it (CSS) and it works. You don't have to "create" anything.

So nothing's stopping anyone from using single-word elements. There's another comment here defending exactly that:

https://news.ycombinator.com/item?id=46418090

But it's bad practice. Just use classes. It's literally what they are designed for.

Aha fair enough, but yeah browsers often allow invalid HTML to just work. But that doesn't mean that the valid usage is somehow flawed. I can understand that the dash can be a bit of a weird rule if you're new to HTML. But I think it's an elegant way to allow users to create custom tags and have readable compact semantic HTML.

But yeah I also do see the confusion part, if a person new to HTML sees these custom tags being used it might think it can create one too and not realize it must contain a dash, and it would still work. So yeah in that sense, indeed it's confusing if you're unfamiliar with it.

But having multiple </div></div></div> at the end of a large block of HTML is also confusing, often resulting in closing too many / too few divs. Having </nav-item></nav-bar></main-header> is much better. So yeah it has it's pros and cons I guess.