原生HTML组件化，听起来像是给标签加个class那么简单？其实远不止如此。它的核心在于通过customElements.define()让浏览器真正“认识”并理解你的自定义标签。如果不走这个注册流程，你写的在浏览器眼里，就只是一个没有语义的普通

，甚至连屏幕阅读器都会直接跳过它。

为什么 会报错：Failed to execute 'define' on 'CustomElementRegistry'

这个问题太常见了。报错的头号原因，往往是标签名不合规范。浏览器就是靠连字符来区分原生元素和自定义元素的。像mybutton、MyButton、button-my这些写法统统不行。正确的命名规则必须满足：全小写字母，且至少包含一个连字符，同时不能以连字符开头或结尾。

• my-button ✅
• loading-indicator ✅
• data-table ✅
• myButton ❌（缺少连字符）
• -my-button ❌（开头是连字符）
• my-button- ❌（结尾是连字符）

另一个高频错误点，在于自定义元素的类定义。如果这个类没有正确继承HTMLElement，或者在构造函数constructor里忘了调用super()，就会导致原型链断裂，浏览器会直接拒绝实例化这个组件。

connectedCallback 和 constructor 到底该放什么逻辑

这两个生命周期钩子的分工必须明确，否则很容易掉坑里。constructor里只应该做三件事：调用super()、初始化内部属性或状态、以及调用this.attachShadow()来创建影子DOM。至于DOM操作、事件绑定、获取父节点、读取innerHTML这些，统统要禁止——因为此时元素还没有被插入到文档中，this.parentNode是null，this.innerHTML也是空字符串。

那么，所有依赖DOM存在的逻辑，都应该挪到connectedCallback中去执行：

• 绑定点击、输入等事件监听器。
• 读取初始的属性值，并同步到影子DOM内部（比如this.getAttribute('size')）。
• 触发首次渲染的补全逻辑（因为attributeChangedCallback不会响应元素创建时就存在的初始属性）。
• 发起数据请求或启动轮询（避免组件未挂载时就浪费资源）。

这里必须提一句：disconnectedCallback绝不是可选项。你在组件内部创建的定时器、通过addEventListener绑定的事件、或者ResizeObserver这类观察器，都必须在这里进行清理。否则，内存泄漏几乎是肉眼可见的。

Shadow DOM 里样式怎么写才不被外部污染，又能让用户定制

影子DOM默认提供了样式隔离，但很多人误以为只要把