customelements.define() 要求自定义元素名必须含且仅含 ascii 短横线（如 'my-button'），禁止使用驼峰、下划线或原生标签名；否则抛 domexception，且未注册时渲染为 htmlunknownelement，connectedcallback 不触发。
customElements.define() 报 DOMException：name must contain a dash
直接注册 mybutton 或 MyButton 会失败，浏览器强制要求自定义元素名必须含短横线（-），否则抛出 DOMException: The name must contain a dash。这不是兼容性问题，是规范硬性校验。
常见错误现象：
- 控制台报错但页面无任何提示
- HTML 中写了
<mybutton></mybutton>却渲染成普通未知标签（HTMLUnknownElement） -
connectedCallback完全不触发
正确写法只有一种：customElements.define('my-button', MyButton) —— 名字里必须有且仅用 ASCII 短横线，不能用下划线、驼峰或大写开头。
试图重定义 button、span 等原生标签会直接失败
调用 customElements.define('button', CustomButton) 会立即抛出 DOMException: "button" is not a valid custom element name。浏览器禁止覆盖所有已知 HTML 标签名，这是不可绕过的安全限制。
为什么不能绕过：
- 解析器在构建 DOM 时就按白名单识别原生标签，
button这类名字被预占，注册阶段直接拒绝 - 即使 hack 掉注册校验，后续创建的节点也不会触发自定义逻辑，
constructor和connectedCallback都不会执行 - 强行使用会导致语义丢失、无障碍支持失效、表单提交行为异常
真实可行的替代路径是：用 is 扩展语法（如 <button is="my-button"></button>），但注意 IE 完全不支持，现代项目若需兼容旧环境，只能退回到 autonomous 元素 + 手动模拟语义。
第三方库引入的同名组件导致冲突
比如你定义了 <my-button></my-button>，而引入的 UI 库（如 Ant Design 或内部共享组件包）也注册了同名 my-button，第二次 define() 会静默失败（不报错但不生效），后注册的构造函数被忽略。
排查与应对方法：
- 运行时检查：
customElements.get('my-button')返回undefined或非预期构造函数，说明已被覆盖或未注册 - 构建期加命名空间前缀，例如统一用
corp-my-button，避免团队间命名碰撞 - 在 Webpack/Vite 配置中通过
define或插件排除特定全局变量或注册逻辑，防止重复加载 - 优先用
if (!customElements.get('my-button')) { customElements.define(...) }做防御性注册
自定义标签在 CSS 布局中表现异常（如重叠、不换行）
像 <sec-2></sec-2> 这类自定义标签默认是 inline 元素，即使加了 display: flex，也可能因浏览器对未知标签的初始 display 计算不一致，导致布局错乱（如后续 div.sec3 上浮重叠）。
这不是 JS 行为问题，而是 HTML 解析层的默认样式缺失：
- 浏览器对未知标签不应用
display: block，也不建立 BFC，文档流行为不可靠 - Normalize.css 等重置库通常不覆盖自定义标签，所以它们保留原始 inline 行为
- 解决方案不是硬改 CSS，而是回归语义化：用
<div class="sec-2"> 替代 <code><sec-2></sec-2>，再通过 class 控制样式和布局真正容易被忽略的一点：自定义元素的布局问题，90% 源于把它当成了“语义容器”，但它本质上只是 JS 构造函数注册点；视觉和流式行为仍由 HTML 规范和 CSS 引擎决定，别指望它自动获得
section或article的默认块级语义。
