JavaScriptWeb组件_CustomElementsAPI-js教程-PHP中文网

JavaScriptWeb组件_CustomElementsAPI

紅蓮之龍

发布： 2025-11-30 18:19:07

原创

523人浏览过

Custom Elements API 允许开发者定义自定义 HTML 标签并赋予其行为与结构，通过 customElements.define() 注册，支持自主元素（如 <my-button>）和基于原生元素扩展的内置元素（如 <button is="fancy-button">），结合生命周期回调（connectedCallback、attributeChangedCallback 等）实现组件逻辑控制，配合 Shadow DOM 可达成样式隔离，适用于构建高复用、轻量级、原生封装的 UI 组件库。

javascriptweb组件_customelementsapi

Custom Elements API 是 Web Components 的核心部分之一，它允许开发者定义自己的 HTML 标签，并赋予这些标签自定义的行为和结构。通过 JavaScript 来注册新的元素类型，你可以创建可复用、封装良好的组件，直接在 HTML 中使用，无需依赖框架。

什么是 Custom Elements

Custom Elements 让你能够创建全新的 HTML 元素，比如 <my-button> 或 <user-card>。这些元素可以像原生标签一样被使用，同时拥有自己的逻辑、样式和生命周期。

浏览器通过 customElements.define() 方法来注册一个自定义元素，该方法接收两个参数：元素名称（必须包含短横线）和一个继承自 HTMLElement 的类。

示例：

class MyButton extends HTMLElement {
  constructor() {
    super();
    this.textContent = '点击我';
    this.style.padding = '10px';
    this.style.background = '#007bff';
    this.style.color = 'white';
    this.style.borderRadius = '4px';
    this.addEventListener('click', () => {
      alert('按钮被点击！');
    });
  }
}

customElements.define('my-button', MyButton);

登录后复制

之后就可以在 HTML 中使用：

立即学习“Java免费学习笔记（深入）”；

<my-button></my-button>

登录后复制

自定义元素的类型

Custom Elements 分为两种类型：自主自定义元素（Autonomous Custom Elements）和自定义内置元素（Customized Built-in Elements）。

21st.dev

开源的UI组件资源平台

查看详情

自主自定义元素：完全独立的新标签，不继承任何现有 HTML 元素行为。如上面的 <my-button>。元素名必须包含短横线（-），避免与未来 HTML 标签冲突。
自定义内置元素：基于现有 HTML 元素扩展功能。例如让一个按钮表现得像 <button>，但增加额外能力。需要在 define 时传入第三个参数 { extends: 'button' }。

示例：扩展原生 button

class FancyButton extends HTMLButtonElement {
  connectedCallback() {
    this.style.fontSize = '18px';
    this.style.background = 'linear-gradient(to right, #ff7e5f, #feb47b)';
  }
}

customElements.define('fancy-button', FancyButton, { extends: 'button' });

登录后复制

使用时需写成：

<button is="fancy-button">渐变按钮</button>

登录后复制

生命周期回调

自定义元素类中可以定义多个生命周期钩子，用于控制组件在不同阶段的行为：

connectedCallback：元素插入 DOM 时调用，适合绑定事件或渲染内容。
disconnectedCallback：元素从 DOM 移除时调用，可用于清理定时器或事件监听。
attributeChangedCallback：当观察的属性发生变化时触发，需配合 observedAttributes 静态属性使用。
adoptedCallback：元素被移动到新文档时调用（较少使用）。

示例：响应属性变化

class UserCard extends HTMLElement {
  static get observedAttributes() {
    return ['name', 'role'];
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'name') {
      this.innerHTML = `姓名：${newValue}`;
    }
  }
}

customElements.define('user-card', UserCard);

登录后复制

此时修改 name 属性会触发更新：