当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScriptWeb组件_CustomElements自定义元素

JavaScriptWeb组件_CustomElements自定义元素

2025-12-21 20:43:19 0浏览收藏

大家好，我们又见面了啊~本文《JavaScriptWeb组件_CustomElements自定义元素》的内容中将会涉及到等等。如果你正在学习文章相关知识，欢迎关注我，以后会给大家带来更多文章相关文章，希望我们能一起进步！下面就开始本文的正式内容~

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 组件逻辑，实现可复用、独立且语义化的代码结构。

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

步骤如下：

创建一个继承自 HTMLElement 的类
在类中添加需要的逻辑（如属性、事件、渲染等）
使用 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;
  }
}