当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript组件化开发教程：自定义元素使用方法

JavaScript组件化开发教程：自定义元素使用方法

2026-01-06 18:11:35 0浏览收藏

“纵有疾风来，人生不言弃”，这句话送给正在学习文章的朋友们，也希望在阅读本文《JavaScript组件化开发教程 JavaScript自定义元素创建与使用方法》后，能够真的帮助到大家。我也会在后续的文章中，陆续更新文章相关的技术文章，有好的建议欢迎大家在评论留言，非常感谢！

自定义元素是Web Components标准中用原生JS定义含短横线标签（如my-button）的HTML扩展机制，需继承HTMLElement、注册后使用，支持shadow DOM封装、属性监听与事件派发。

JavaScript如何实现组件化开发_JavaScript自定义元素如何创建与使用

JavaScript组件化开发的核心是封装可复用、独立运行的UI单元，而自定义元素（Custom Elements）是Web Components标准中最直接的实现方式——它让你用原生JS定义HTML标签，无需框架也能做到“写一次， anywhere 使用”。

什么是自定义元素？

自定义元素是浏览器原生支持的API，允许你创建带有自己名字（必须含短横线，如 my-button）、行为和样式的HTML标签。它基于类语法，继承自 HTMLElement，生命周期清晰，与DOM深度集成。

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

分三步：定义类 → 注册元素 → 在HTML中使用。关键细节不能漏：

类名必须继承 HTMLElement，且不能有构造函数参数（否则会报错）；
构造函数里只能做最小初始化（如 this.attachShadow({mode: 'open'})），不能访问 this.innerHTML 或调用 super() 后操作DOM；
注册时标签名必须全小写且含短横线（my-counter ✅，MyCounter ❌，counter ❌）；
推荐用 shadow DOM 封装样式和结构，避免全局污染。

示例：一个计数器组件

class MyCounter extends HTMLElement {
  constructor() {
    super();
    this.count = 0;
    this.attachShadow({ mode: 'open' });
    this.render();
  }

  render() {
    this.shadowRoot.innerHTML = `
      
      ${this.count}
      
    `;
    this.shadowRoot.getElementById('increase').onclick = () => this.update(1);
    this.shadowRoot.getElementById('decrease').onclick = () => this.update(-1);
  }

  update(delta) {
    this.count += delta;
    this.shadowRoot.querySelector('span').textContent = this.count;
  }
}

customElements.define('my-counter', MyCounter);

之后即可在任意HTML中写：

如何让组件更实用？支持属性和响应式更新

自定义元素可通过 attributeChangedCallback 监听属性变化，实现类似Vue/React的props响应能力：

在 static get observedAttributes() 中声明要监听的属性名（如 ['count', 'disabled']）；
在 attributeChangedCallback(attr, oldVal, newVal) 中处理变更逻辑；
设置属性需用 this.setAttribute('count', 5)，或直接修改 this.count = 5 后手动触发更新（不自动同步到HTML属性）；
初始属性值可在 connectedCallback 中读取 this.getAttribute('count') 并初始化状态。

如何在项目中合理使用自定义元素？

它不是替代React/Vue的方案，而是补充——适合构建设计系统基础组件、微前端共享UI、或轻量级页面增强：

避免在自定义元素内部引入大型第三方库，保持轻量；
用 slot 实现内容分发（如标题
）；
通过 EventTarget 派发自定义事件（如 this.dispatchEvent(new CustomEvent('change', { detail: this.count }))），供外部监听；
配合 HTML Template 标签预存结构，提升可读性与复用性。

不复杂但容易忽略：所有现代浏览器（Chrome/Firefox/Safari/Edge 79+）均已原生支持，无需polyfill。

好了，本文到此结束，带大家了解了《JavaScript组件化开发教程：自定义元素使用方法》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！