customElements.define()报DOMException是HTML规范强制拦截，要求标签名必须含破折号、全小写且不与原生标签重名，否则立即拒绝注册并返回HTMLUnknownElement。
customElements.define() 为什么报 DOMException: The element name is not valid
不是浏览器兼容问题，是 HTML 规范强制拦截：只要 customElements.define() 的第一个参数不满足「至少一个 ASCII 破折号 + 全小写 + 不是原生标签名」三条件，立刻抛错，不执行后续逻辑。
常见非法写法直接被拒：
-
mybutton（缺破折号） -
MyButton（含大写） -
my_button（用下划线） -
div、slot、button（与原生标签重名）
错误信息固定为 DOMException: The element name is not valid；try/catch 捕获后也无法补救——组件根本没注册成功，后续 document.createElement('mybutton') 只会返回 HTMLUnknownElement，不触发任何生命周期。
多团队共存时如何避免自定义标签名冲突
前缀（如 shop-button、abc-modal）不是语法要求，而是工程隔离的最低成本手段。浏览器不区分前缀，但团队间必须提前约定并固化。
立即学习“前端免费学习笔记（深入）”；
否则后果明确：
- 两个包都注册
ui-button→ 后者覆盖前者，无警告、无提示 - 上线后改前缀 → 所有模板里的
<ui-button>都得手动替换成新名，属于 breaking change - npm 包发布前未加前缀 → 无法在项目中安全复用，极易被其他包污染
前缀应与组织/包名一致（如 @shop/ui 对应 shop-button），且必须在首次发布前定死。
class/id/data-* 命名怎么和自定义标签协同
自定义标签只是容器起点，内部结构仍需严格隔离。泛化命名（如 class="btn"、id="modal"、data-id="123"）在多组件共存时必然撞车。
实操要点：
- 根元素用唯一 block 名：
class="user-profile"，不用class="profile" - BEM 子元素严格双下划线：
class="user-profile__avatar"，禁用user-profile-avatar（易混淆） - 状态修饰符用双短横：
class="user-profile--loading"，不用is-loading（无归属） -
data-user-id必须带业务上下文，data-id等裸名等于没写 - JS 中读取保持一致性：
el.dataset.userId对应data-user-id，大小写自动转驼峰，但前提是命名本身有意义
自定义标签内部能用 -webkit- 伪类吗
可以，但仅限于标签内部的原生子元素。比如 my-progress 组件里写 progress::-webkit-progress-value 是生效的；但 my-progress::-webkit-inner-spin-button 什么都不会匹配——浏览器根本不识别这个自定义标签名的私有语义。
真正容易踩坑的是兼容性断层：
-
input[type="number"]的::-webkit-inner-spin-button只绑定原生input，无法继承或转发 - 不要试图用
my-input::-webkit-inner-spin-button控制样式，它永远不生效 - Shadow DOM 内部的伪类作用域有限，且不同浏览器对私有前缀的支持程度不一
最常被忽略的一点：自定义标签名一旦注册，就全局生效，且无法卸载。命名决策不是开发阶段的事，而是发布契约的一部分。
