HTML组件化：基础标签到高级应用视图的演进之路

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

标签命名不规范是最常见原因。浏览器通过连字符区分原生与自定义元素，必须遵循以下规则：

1. my-button ✅
2. loading-indicator ✅
3. data-table ✅
4. myButton ❌（缺少连字符）
5. -my-button ❌（以连字符开头）
6. my-button- ❌（以连字符结尾）

另一个常见错误是类未继承HTMLElement，或在constructor中忘记调用super()，这会导致原型链断裂，浏览器拒绝实例化组件。

connectedCallback和constructor到底该放什么逻辑

constructor应仅包含三项操作：调用super()、初始化属性、执行this.attachShadow()。所有DOM操作都应避免，因为此时元素尚未插入文档。

所有依赖DOM的逻辑必须移至connectedCallback：

1. 绑定点击/输入事件
2. 读取初始属性值并同步到shadow DOM
3. 触发首次渲染补全
4. 请求数据或启动轮询

注意：disconnectedCallback必须清理定时器、事件器等资源，否则会导致内存泄漏。

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

Shadow DOM样式处理需注意以下要点：

1. 样式必须内联注入，外部样式表无效
2. 使用:host控制组件自身样式
3. 暴露CSS自定义属性供外部覆盖
4. 慎用穿透选择器，避免破坏封装性

例如按钮背景色应通过var(--my-button-bg, #007bff)定义，允许用户通过style="--my-button-bg: #ff6b6b;"覆盖。

IE和微信X5内核到底能不能用自定义元素

IE完全不支持自定义元素，微信X5内核需版本≥0.4.8.90才能支持基本功能。服务端渲染时需特别注意预定义处理，否则老版本解析器可能丢弃未识别标签。

可访问性设计不容忽视：组件应包含ARIA属性并响应键盘事件，确保残障用户也能正常使用。

通过规范命名、正确处理生命周期方法及优化样式封装，你将能够构建出高效、可维护的Web组件，提升开发效率与用户体验。