Vue注册PascalCase组件后使用对应驼峰标签不显示是什么原因？

HTML 本身对大小写不敏感，所有写在 HTML 中的标签、属性名都会被浏览器自动转换为全小写。你在 HTML 里写的 <TodoItem></TodoItem> 标签，经过浏览器解析后会变成 <todoitem></todoitem>，和你注册的 TodoItem 组件无法匹配。

Vue 对组件名的匹配做了标准化处理：用 PascalCase（大驼峰）格式注册的组件，会自动对应为 kebab-case（短横线分隔全小写）的可调用格式，也就是 TodoItem 对应识别为 todo-item，所以你用 <todo-item> 或者大小写不严格的 <todo-Item> 都可以正常匹配到组件，而被浏览器转成全小写的 <todoitem> 没有连字符，自然就会触发「未知自定义元素」的报错。

• 注册组件时支持两种合法命名格式：
  1. PascalCase（大驼峰）：例如 TodoItem，是更推荐的注册命名格式，支持两种调用写法，适配所有使用场景
  2. kebab-case（短横线分隔全小写）：例如 todo-item，注册后仅支持用同格式的 kebab-case 调用
• 不同场景的调用要求：
  1. DOM 模板（直接写在 .html 文件里的模板内容）：必须使用 kebab-case 格式调用组件，避免被浏览器自动转小写后匹配失败
  2. 单文件组件（.vue 文件）的 <template>、组件内的字符串 template 配置：可以任选 PascalCase 或 kebab-case 调用，更推荐用 PascalCase，能清晰和原生 HTML 标签做区分
• 通用约定：组件名必须由两个及以上单词组成，避免和原生 HTML 标签重名，不要用 header、button 这类单单词作为组件名

内容的提问来源于stack exchange，提问作者user587266