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() 注册元素
示例：创建一个简单的计数器按钮
企业软件介绍主页html模板
下载
一款多用途的企业软件前端HTML模板。IT软件服务公司网站响应式单页模板。基于CSS、JS、HTML模块化原则创建的。如果您的站点不需要所有元素，那么可以轻松地删除不必要的组件。模板的代码干净，友好，注释良好。这使得编辑和自定义模板变得很容易。
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() 或注册时机问题。
