Custom Elements API 允许开发者定义自定义 HTML 标签并赋予其行为与结构，通过 customElements.define() 注册，支持自主元素（如 <my-button>）和基于原生元素扩展的内置元素（如 <button is="fancy-button">），结合生命周期回调（connectedCallback、attributeChangedCallback 等）实现组件逻辑控制，配合 Shadow DOM 可达成样式隔离，适用于构建高复用、轻量级、原生封装的 UI 组件库。
Custom Elements API 是 Web Components 的核心部分之一，它允许开发者定义自己的 HTML 标签，并赋予这些标签自定义的行为和结构。通过 JavaScript 来注册新的元素类型，你可以创建可复用、封装良好的组件，直接在 HTML 中使用，无需依赖框架。
什么是 Custom Elements
Custom Elements 让你能够创建全新的 HTML 元素，比如 <my-button> 或 <user-card>。这些元素可以像原生标签一样被使用，同时拥有自己的逻辑、样式和生命周期。
浏览器通过 customElements.define() 方法来注册一个自定义元素，该方法接收两个参数：元素名称（必须包含短横线）和一个继承自 HTMLElement 的类。
示例：class MyButton extends HTMLElement {
constructor() {
super();
this.textContent = '点击我';
this.style.padding = '10px';
this.style.background = '#007bff';
this.style.color = 'white';
this.style.borderRadius = '4px';
this.addEventListener('click', () => {
alert('按钮被点击！');
});
}
}
customElements.define('my-button', MyButton);
之后就可以在 HTML 中使用：
立即学习“Java免费学习笔记（深入）”；
<my-button></my-button>
自定义元素的类型
Custom Elements 分为两种类型：自主自定义元素（Autonomous Custom Elements）和自定义内置元素（Customized Built-in Elements）。
- 自主自定义元素：完全独立的新标签，不继承任何现有 HTML 元素行为。如上面的 <my-button>。元素名必须包含短横线（-），避免与未来 HTML 标签冲突。
- 自定义内置元素：基于现有 HTML 元素扩展功能。例如让一个按钮表现得像 <button>，但增加额外能力。需要在 define 时传入第三个参数 { extends: 'button' }。
class FancyButton extends HTMLButtonElement {
connectedCallback() {
this.style.fontSize = '18px';
this.style.background = 'linear-gradient(to right, #ff7e5f, #feb47b)';
}
}
customElements.define('fancy-button', FancyButton, { extends: 'button' });
使用时需写成：
<button is="fancy-button">渐变按钮</button>
生命周期回调
自定义元素类中可以定义多个生命周期钩子，用于控制组件在不同阶段的行为：
- connectedCallback：元素插入 DOM 时调用，适合绑定事件或渲染内容。
- disconnectedCallback：元素从 DOM 移除时调用，可用于清理定时器或事件监听。
- attributeChangedCallback：当观察的属性发生变化时触发，需配合 observedAttributes 静态属性使用。
- adoptedCallback：元素被移动到新文档时调用（较少使用）。
class UserCard extends HTMLElement {
static get observedAttributes() {
return ['name', 'role'];
}
attributeChangedCallback(name, oldValue, newValue) {
if (name === 'name') {
this.innerHTML = `姓名：${newValue}`;
}
}
}
customElements.define('user-card', UserCard);
此时修改 name 属性会触发更新：
<user-card name="张三"></user-card>
实际应用建议
使用 Custom Elements 可以构建高度封装的组件库，尤其适合设计系统或跨项目复用 UI 模块。
- 确保元素命名符合规范（带短横线），避免命名冲突。
- 结合 Shadow DOM 使用，实现样式隔离和真正封装。
- 合理利用生命周期管理状态和资源释放。
- 对于复杂组件，可结合模板（<template>）预定义结构。
基本上就这些。Custom Elements 提供了原生级别的组件化能力，不依赖框架也能写出结构清晰、易于维护的前端代码。虽然生态上不如 React 或 Vue 丰富，但在轻量级场景或追求性能时非常有价值。
