Invalid component name error for valid name that uses unicode characters

Version

2.5.16

Reproduction link

https://jsfiddle.net/50wL7mdz/536596/

Steps to reproduce

1. register component with unicode component name. ex: my-컴포넌트
2. use it in template. ex: <my-컴포넌트></my-컴포넌트>
3. Vue warn is logged and component is not rendered.

What is expected?

No error, no warning. The component should be rendered properly.

What is actually happening?

The component is not rendered with this warning.

[Vue warn]: Invalid component name: “my-컴포넌트”. Component names can only contain alphanumeric characters and the hyphen, and must start with a letter.

---

Component-Names in Vue Guide says,

we strongly recommend following the W3C rules for custom tag names (all-lowercase, must contain a hyphen)

However, W3C rules allow lots of unicode characters for component name. I think these two rules are important:

• They start with a lowercase ASCII letter, ensuring that the HTML parser will treat them as tags instead of as text.
• They do not contain any uppercase ASCII letters, so user agents can always treat HTML elements ASCII-case-insensitively.

The rules prevent using uppercase ASCII letters, and does not force using only lowercase ASCII letters. They allow unicode characters, but Vue.js doesn’t accept unicode component names.

Furthermore, the error level is not error but warn, but it doesn’t work in some cases like using it as custom element in template. It works when routed by vue router.

[youngrok]

I think two points should be fixed. First, html parser allows all XML QName.

https://github.com/vuejs/vue/blob/21112ecc691e25fc13b40985c0f0381e3911efa5/src/compiler/parser/html-parser.js#L19

Second, validateComponentName allows all PotentialCustomElementName.

https://github.com/vuejs/vue/blob/21112ecc691e25fc13b40985c0f0381e3911efa5/src/core/util/options.js#L256

[youngrok]

Hi, let me explain my cases. I’m working on tax reporting software in Korea. So many items are required for tax reporting, and so many terms are used in those items, and they are all Korean.

For the first time I tried to translate all the terms to English, but failed because some don’t have standard translation, some have same translation but different meaning, some have subtle difference of meaning, and so on. And it wasn’t efficient to translate all of them.

Therefore, I changed my mind to use the Korean terms as they are, and this new way works for server side and dbms perfectly. It also works for plain javascript. However, vue.js doesn’t support unicode names in some cases, so I want to make it work.

I think my case is not so rare case. Lots of developers want to use there native language in code especially when developing software that uses many complicated terms.

Technically a subset of HTML is still HTML-compliant so applying extra restrictions like this won’t break the standard.

I understand. You’re right. Then what I need is not a fix, but an improvement.