JavaScript自定义元素使用教程

Custom Elements 作为 Web Components 的核心原生能力，让开发者无需依赖框架即可创建语义化、可复用、高封装性的自定义 HTML 标签——只需继承 HTMLElement、定义生命周期钩子（如 constructor 和 connectedCallback），并通过 customElements.define() 注册，就能像使用

或 一样直接在 HTML 中使用如 这样的标签；它不仅支持属性监听、事件绑定和状态管理，还能与 Shadow DOM 深度结合实现样式与逻辑隔离，是现代前端构建轻量、标准、跨框架组件的理想选择。

自定义元素（Custom Elements）是 Web Components 的核心功能之一，允许开发者创建全新的 HTML 标签，并赋予其特定的行为和结构。通过 JavaScript 定义类并注册元素名称，你可以在网页中像使用原生标签一样使用这些自定义标签。

什么是 Custom Elements？

Custom Elements 是浏览器原生支持的 API，让你能够：

• 定义新的 HTML 元素名称（需包含短横线 -）
• 绑定一个 JavaScript 类来控制元素的行为
• 在页面中直接使用自定义标签，如

这类元素可以封装 UI 组件逻辑，实现可复用、独立且语义化的代码结构。

如何定义一个自定义元素？

步骤如下：

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 中使用：

生命周期回调函数

自定义元素提供几个关键的生命周期钩子，用于控制行为：

• 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() 或注册时机问题。

本篇关于《JavaScript自定义元素使用教程》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！