JavaScriptWeb组件_CustomElements自定义元素-js教程-PHP中文网

JavaScriptWeb组件_CustomElements自定义元素

夢幻星辰

发布： 2025-11-23 18:43:02

原创

381人浏览过

Custom Elements 是 Web Components 的核心功能，允许开发者通过继承 HTMLElement 创建带行为的自定义 HTML 标签，如 <counter-button>；需使用 customElements.define() 注册，标签名必须含短横线；支持 constructor、connectedCallback 等生命周期钩子，结合 Shadow DOM 可实现高封装性组件，适用于现代浏览器。

javascriptweb组件_customelements自定义元素

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

什么是 Custom Elements？

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

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

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

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

步骤如下：

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

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

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

企业软件介绍主页html模板

一款多用途的企业软件前端HTML模板。IT软件服务公司网站响应式单页模板。基于CSS、JS、HTML模块化原则创建的。如果您的站点不需要所有元素，那么可以轻松地删除不必要的组件。模板的代码干净，友好，注释良好。这使得编辑和自定义模板变得很容易。

350

查看详情

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;
  }
}