自定义元素名必须含破折号，否则注册失败；前缀虽非语法强制但需统一简短；注册须早于DOM渲染，否则需手动upgrade；HTML中命名空间无效，应使用data-属性隔离。
自定义元素名必须含破折号，否则注册直接失败
浏览器在 customElements.define() 时强制校验标签名格式：不带破折号（如 mybutton、MyButton、my_button）会立刻抛出 DOMException: The element name is not valid。这不是兼容性差异，而是 HTML 规范层硬约束。
常见错误包括：
- 复制示例代码时漏掉破折号，比如把
my-greeting写成mygreeting - 用下划线或驼峰命名：
my_greeting、myGreeting同样非法 - 误把自定义元素当 class 使用：
<div class="my-button">→ 不触发组件逻辑，也不会报错，但功能完全失效
前缀是协作约定，不是语法要求，但必须统一且简短
规范只要求破折号，不要求前缀；但多团队共存时，button 是原生标签，modal 可能被第三方库占用，tabs 已在多个 UI 库中泛滥——不加前缀等于主动放弃隔离能力。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 前缀全小写、固定长度、项目唯一，如
shop-、dash-，避免myapp_v2_这类易变长、难维护的格式 - 注册后可通过
customElements.get('shop-button')检查是否已定义，但customElements.get('button')永远返回undefined（原生元素不走这套机制） - 不要在组件内部解析
this.localName做逻辑分支（如if (name.includes('shop-'))），这会让组件耦合标签字符串，违背封装原则
注册时机比命名更易踩坑：必须早于 DOM 渲染
如果脚本在 DOM 解析完成前执行，customElements.define() 没问题；但如果 HTML 已先加载并解析了 <shop-button> 标签，再调用 define，该节点不会自动升级为自定义元素——它只是个未知的 void 元素。
补救方式只有两种：
- 确保注册脚本在
<script>中靠前，或用type="module"（模块脚本默认 defer） - 若已渲染，必须手动调用
customElements.upgrade(document.body)或针对特定节点customElements.upgrade(el) - 不推荐监听
DOMContentLoaded后再注册——此时部分标签可能已被解析，风险不可控
别碰 setAttributeNS，HTML 里它没意义
HTML 环境中没有命名空间运行时支持。setAttributeNS("http://example.com/ns", "ns:foo", "bar") 看似合法，但插入 DOM 后，命名空间前缀会被浏览器自动剥离，ns:foo 变成普通 foo 属性，xmlns:ns 也会消失。这不是 Bug，是 Blink/WebKit 的明确行为。
真正需要属性隔离的场景，应转向：
- 统一使用
data-前缀：data-shop-theme、data-dash-version - 读取时用
el.attributes遍历 +attr.name.startsWith("data-shop-")筛选，比依赖命名空间更可靠 - 对
class、style、value等反射属性，永远用对应 DOM property（el.className、el.style.color、el.value），而非setAttributeNS
最容易被忽略的是注册时机和前缀一致性——命名再规范，注册晚了或前缀混用，冲突照样发生。命名空间在 HTML 里不是“未启用功能”，而是根本不存在的抽象；所有隔离都得靠破折号、前缀、注册顺序和作用域封装四者共同落地。
