首页 > 文章 > 前端

JavaScriptWeb组件_CustomElements自定义元素

时间：2025-12-21 20:43:19 302浏览收藏

推广推荐

支持 PC / 移动端，安全直达

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

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

JavaScriptWeb组件_CustomElements自定义元素

自定义元素（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;
  }
}

注意事项与最佳实践

自定义标签名必须包含短横线（-），避免与未来 HTML 标签冲突
不要覆盖已存在的元素名称
尽量将 DOM 操作放在 connectedCallback 中执行
合理使用 Shadow DOM 可增强封装性（可结合使用）
注意浏览器兼容性：现代主流浏览器均已支持，旧版 IE 不支持

基本上就这些。Custom Elements 提供了一种干净、标准的方式构建可复用组件，无需框架也能实现组件化开发。结合 Shadow DOM 和模板（template）标签，能进一步提升封装能力。不复杂但容易忽略细节，比如正确调用 super() 或注册时机问题。

好了，本文到此结束，带大家了解了《JavaScriptWeb组件_CustomElements自定义元素》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！