如何利用JavaScript的Web Components构建可复用组件？-js教程-PHP中文网

如何利用JavaScript的Web Components构建可复用组件？

幻影之瞳

发布： 2025-10-04 13:56:02

原创

612人浏览过

构建可复用组件需封装、独立与易集成，Web Components 提供原生支持。1. 使用 Custom Elements 定义自定义标签，通过 customElements.define() 注册继承 HTMLElement 的类，实现自定义元素；2. 结合 Shadow DOM 隔离样式与结构，在构造函数中调用 attachShadow() 并设置 shadowRoot.innerHTML，避免全局污染；3. 支持属性与事件，通过 observedAttributes 监听属性变化，attributeChangedCallback 触发更新，dispatchEvent 派发事件实现交互；4. 组件可在任意项目中使用，不依赖框架，适合设计系统共享，关键在于属性同步、事件通信和样式封装。

如何利用javascript的web components构建可复用组件？

构建可复用组件的关键在于封装、独立性和易集成。JavaScript 的 Web Components 技术提供了一套浏览器原生支持的 API，让你可以创建自定义 HTML 元素，并在任何框架或无框架项目中使用。以下是具体实现方式。

使用 Custom Elements 创建自定义标签

Custom Elements 允许你定义自己的 HTML 标签，这是构建可复用组件的基础。

通过 customElements.define() 方法注册一个类继承自 HTMLElement 的组件：

class MyButton extends HTMLElement {
  connectedCallback() {
    if (!this.rendered) {
      this.innerHTML = ``;
      this.rendered = true;
    }
  }
}

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

之后就可以在 HTML 中直接使用：<my-button>提交</my-button>。

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

结合 Shadow DOM 实现样式和结构隔离

Shadow DOM 能将组件的 DOM 和 CSS 封装起来，避免全局污染。

在组件构造函数中挂载 Shadow Root：

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

查看详情

class MyCard extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }

  connectedCallback() {
    const title = this.getAttribute('title') || '默认标题';
    this.shadowRoot.innerHTML = `
      <style>
       .card { border: 1px solid #ddd; padding: 16px; border-radius: 8px; font-family: sans-serif; }
      </style>
      <div class="card">
       <h3>${title}</h3>
       <slot></slot>
      </div>
    `;
  }
}

customElements.define('my-card', MyCard);

使用时内容可通过 <slot> 插入：<my-card title="用户信息">姓名：张三</my-card>。

支持属性与事件，提升交互能力

为了让组件更灵活，应响应属性变化并对外派发事件。

利用 static get observedAttributes() 监听属性变更：

class MyInput extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }

  static get observedAttributes() {
    return ['label', 'value'];
  }

  attributeChangedCallback(attrName, oldValue, newValue) {
    if (oldValue === newValue) return;
    this.render();
  }

  render() {
    const label = this.getAttribute('label') || '输入框';
    const value = this.getAttribute('value') || '';
    this.shadowRoot.innerHTML = `
     <label>${label}: <input value="${value}" /></label>
    `;
    this.shadowRoot.querySelector('input').addEventListener('input', e => {
      this.dispatchEvent(new CustomEvent('change', { detail: e.target.value }));
      this.setAttribute('value', e.target.value);
     });
  }

  connectedCallback() {
    this.render();
  }
}

customElements.define('my-input', MyInput);

外部可监听事件：<my-input onchange="console.log(event.detail)"></my-input>。

基本上就这些。Web Components 不依赖任何框架，适合打造设计系统或跨项目共享组件。只要注意属性同步、事件通信和样式封装，就能写出真正可复用的元素。不复杂但容易忽略细节。

以上就是如何利用JavaScript的Web Components构建可复用组件？的详细内容，更多请关注php中文网其它相关文章！