Custom Elements 是 Web Components 的核心功能，允许开发者通过继承 HTMLElement 创建带行为的自定义 HTML 标签，如 <counter-button>；需使用 customElements.define() 注册，标签名必须含短横线；支持 constructor、connectedCallback 等生命周期钩子，结合 Shadow DOM 可实现高封装性组件，适用于现代浏览器。
自定义元素（Custom Elements）是 Web Components 的核心功能之一，允许开发者创建全新的 HTML 标签，并赋予其特定的行为和结构。通过 JavaScript 定义类并注册元素名称，你可以在网页中像使用原生标签一样使用这些自定义标签。
什么是 Custom Elements？
Custom Elements 是浏览器原生支持的 API，让你能够：
- 定义新的 HTML 元素名称（需包含短横线 -）
- 绑定一个 JavaScript 类来控制元素的行为
- 在页面中直接使用自定义标签，如 <my-button></my-button>
这类元素可以封装 UI 组件逻辑，实现可复用、独立且语义化的代码结构。
如何定义一个自定义元素？
步骤如下：
立即学习“Java免费学习笔记（深入）”；
- 创建一个继承自 HTMLElement 的类
- 在类中添加需要的逻辑（如属性、事件、渲染等）
- 使用 customElements.define() 注册元素
示例：创建一个简单的计数器按钮
constructor() {
super();
this.count = 0;
this.textContent = `点击次数: ${this.count}`;
}
connectedCallback() {
this.addEventListener('click', () => {
this.count++;
this.textContent = `点击次数: ${this.count}`;
});
}
}
customElements.define('counter-button', CounterButton);
之后即可在 HTML 中使用：
<counter-button></counter-button>生命周期回调函数
自定义元素提供几个关键的生命周期钩子，用于控制行为：
- constructor：必须调用 super()，初始化状态和设置默认值
- connectedCallback：元素插入 DOM 时触发，适合绑定事件或渲染内容
- disconnectedCallback：元素从 DOM 移除时调用，可用于清理资源
- attributeChangedCallback：监听属性变化，需配合 observedAttributes 静态属性使用
例如监听属性变化：
static get observedAttributes() {return ['label'];
}
attributeChangedCallback(name, oldValue, newValue) {
if (name === 'label') {
this.textContent = newValue;
}
}
注意事项与最佳实践
- 自定义标签名必须包含短横线（-），避免与未来 HTML 标签冲突
- 不要覆盖已存在的元素名称
- 尽量将 DOM 操作放在 connectedCallback 中执行
- 合理使用 Shadow DOM 可增强封装性（可结合使用）
- 注意浏览器兼容性：现代主流浏览器均已支持，旧版 IE 不支持
基本上就这些。Custom Elements 提供了一种干净、标准的方式构建可复用组件，无需框架也能实现组件化开发。结合 Shadow DOM 和模板（template）标签，能进一步提升封装能力。不复杂但容易忽略细节，比如正确调用 super() 或注册时机问题。
