Custom Elements 是 Web Components 的核心功能，允许开发者通过继承 HTMLElement 创建带行为的自定义 HTML 标签，如 ；需使用 customElements.define() 注册，标签名必须含短横线；支持 constructor、connectedCallback 等生命周期钩子，结合 Shadow DOM 可实现高封装性组件，适用于现代浏览器。
自定义元素（Custom Elements）是 Web Components 的核心功能之一，允许开发者创建全新的 HTML 标签，并赋予其特定的行为和结构。通过 JavaScript 定义类并注册元素名称，你可以在网页中像使用原生标签一样使用这些自定义标签。
什么是 Custom Elements？
Custom Elements 是浏览器原生支持的 API，让你能够：
- 定义新的 HTML 元素名称（需包含短横线 -）
- 绑定一个 JavaScript 类来控制元素的行为
- 在页面中直接使用自定义标签，如
这类元素可以封装 UI 组件逻辑，实现可复用、独立且语义化的代码结构。
如何定义一个自定义元素？
步骤如下：
立即学习“Java免费学习笔记（深入）”；
- 创建一个继承自 HTMLElement 的类
- 在类中添加需要的逻辑（如属性、事件、渲染等）
- 使用 customElements.define() 注册元素
示例：创建一个简单的计数器按钮
鼠标悬停图片分享按钮动画效果
下载
jQuery插件可以实现鼠标滑过图片时在图片上方创建任意的元素，包括分享按钮和图片文字描述等。这些按钮和文字可以悬浮在图片的任意位置，同时你也可以自己定义这些图片上方的元素出现时的动画特效
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 中使用：
生命周期回调函数
自定义元素提供几个关键的生命周期钩子，用于控制行为：
- 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() 或注册时机问题。
