自定义元素命名必须含连字符且全小写，如my-button；非法命名包括无连字符、含大写或下划线、数字开头或使用原生标签名；需校验格式、工具链拦截并团队统一kebab-case规范。
直接用带连字符的名称，比如 my-button、data-table 或 shop-header，别写成 mybutton、MyButton、my_button —— 浏览器会立刻拒绝注册，报错信息明确指出 “The name is not a valid custom element name”。
命名必须含连字符且全小写
这是 HTML 规范强制要求，不是建议。连字符（-）是浏览器识别自定义元素的唯一语法标记，用于和原生标签（如 div、button）划清界限，也预留未来标准扩展空间。
- ✅ 合法：
date-picker、nav-menu、a-b（最简形式也得有两个字母加一个短横） - ❌ 非法：
mybutton（无连字符）、MyButton（含大写）、my_button（下划线）、123-card（数字开头）、div（原生标签名）
注册前先校验名称格式
别等 customElements.define() 报错才排查。可在定义前加一行简单判断：
function isValidCustomElementName(name) {
return typeof name === 'string'
&& name.includes('-')
&& name === name.toLowerCase()
&& /^[a-z][a-z0-9]*(-[a-z0-9]+)*$/.test(name);
}
调用时检查：if (!isValidCustomElementName('my-button')) throw new Error('Invalid element name');
编辑器和工具链提前拦截
手动检查容易疏漏，建议借助开发工具预防：
- VS Code 安装插件 HTMLHint，并启用
attr-name-lowercase和unknown-tag规则（需手动开启自定义标签校验） - 在构建流程中加入 ESLint 插件
@open-wc/eslint-plugin，它能静态扫描customElements.define()的第一个参数 - 模板中写标签时，用 IDE 的 Emmet 或自动补全功能，避免手误漏掉连字符
团队协作统一命名规范
单人项目可自行约束，多人协作时容易因风格不一致引入问题：
- 约定前缀（如
shop-、cms-），既避免冲突，也自然保证含连字符，例如shop-product-card - 禁用下划线和驼峰命名，所有组件名、class、id 全部采用 kebab-case，保持一致性
- 建立组件命名清单文档，新组件注册前查重，尤其注意不要和已有 class/id 名重复（如定义了
<user-profile>，就别再用class="user-profile"）
