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免费学习笔记（深入）”；

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

1. 创建一个继承自 HTMLElement 的类
2. 在类中添加需要的逻辑（如属性、事件、渲染等）
3. 使用 customElements.define() 注册元素

示例：创建一个简单的计数器按钮

class CounterButton extends HTMLElement {
  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() 或注册时机问题。