mybutton会报domexception，因浏览器强制要求自定义元素名必须含至少一个短横线（-），如my-button✅；mybutton❌、mybutton❌、1button❌均不合法，这是w3c规范的硬约束，旨在避免与原生标签冲突。
自定义元素命名不合规，customElements.define() 直接失败，不是警告而是硬性拦截——浏览器根本不认你注册的类。
为什么 mybutton 会报 DOMException？
浏览器强制要求自定义元素名必须含至少一个短横线（-），这是 W3C 规范的硬约束，不是建议。原因很直接：防止与未来 HTML 原生标签冲突。所有合法名都得是 kebab-case 形式。
-
my-button✅ 合法 -
mybutton❌ 抛DOMException: Failed to execute 'define' on 'CustomElementRegistry': The name "mybutton" is not a valid custom element name -
Button、MyButton、1button全部非法 - 原生标签如
button、input、font-face也禁止复用，哪怕加了短横线（button-x仍可能触发“IF THIS IS A NATIVE CUSTOM ELEMENT”警告）
如何避免和第三方库或原生元素重名？
冲突往往不是因为命名不合规，而是名字太通用。比如 my-button 碰上另一个团队的 my-button，或某 UI 库也用了相同名称，customElements.define() 第二次调用就会静默失败（无报错但组件不生效）。
- 采用公司/项目级前缀，例如
corp-button、app-modal，而非泛化的my-或ui- - 在构建阶段接入命名检查工具（如基于正则
/^[a-z][a-z0-9]*-[a-z0-9\-]*[a-z0-9]$/+ 白名单比对） - 建立组件注册中心，记录已注册名及来源（尤其适用于微前端或多团队共用基建的场景）
- 若必须兼容旧名，可用
customElements.get('my-button')判定是否已存在，再决定跳过注册或 throw Error 提示
Vue/React 里用 <my-button></my-button> 为啥渲染异常？
框架默认把带短横线的标签当“未知组件”处理，但没正确透传属性或事件，导致 slot 丢失、className 变成 class 失效、自定义事件监听不到。
- Vue：必须配置
app.config.compilerOptions.isCustomElement = tag => tag.startsWith('corp-')，否则它会尝试用 Vue 的响应式逻辑解析该标签 - React：不自动适配，需手动用
ref拿到实例后调用setAttribute、addEventListener，不能依赖 JSX 属性映射 - SSR 场景下，服务端不执行
connectedCallback，Shadow DOM 不生成，务必在客户端 hydrate 阶段再 attach，否则 DOM 结构 mismatch
真正容易被忽略的不是“怎么起名”，而是“谁在注册、何时注册、是否重复”。多人协作时，customElements.define() 调用一旦分散在不同模块或懒加载 chunk 中，就极难靠肉眼发现冲突——得靠构建期校验+运行时防御性判断，而不是等控制台出现模糊的 “not defined” 才去翻源码。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
