javascript如何实现组件化_Web Components的基本概念是什么

紅蓮之龍 2026-01-01 00:00:00 次阅读

Web Components 是浏览器原生支持的组件化标准，由 Custom Elements、Shadow DOM 和 HTML Templates 三大技术组成，实现可复用、自治、隔离的 UI 单元；它无需框架即可跨平台运行，支持跨框架使用与 SEO，是补足底层能力的原生组件化方案。

JavaScript 实现组件化，核心是封装可复用、自治、隔离的 UI 单元；Web Components 是浏览器原生支持的一套标准 API，让开发者能创建真正独立的自定义 HTML 元素。

Web Components 的三大基础技术

它不是单一技术，而是由三个规范协同工作的组合：

Custom Elements：定义和注册自定义 HTML 标签（如），支持生命周期回调（connectedCallback、disconnectedCallback 等）
Shadow DOM：为组件提供样式与结构的局部作用域，内部 CSS 不会泄露，外部样式也默认进不去，实现真正的样式隔离
HTML Templates（和）：声明不立即渲染的 DOM 片段，配合实现内容分发（类似 Vue 的 slot 或 React 的 children）

一个最简 Web Component 示例

以下代码定义了一个带默认文本、可接收属性、有自己样式的按钮组件：

class MyButton extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: 'open' });
    const template = document.createElement('template');
    template.innerHTML = `
      
      
    `;
    shadow.appendChild(template.content.cloneNode(true));
  }

  static get observedAttributes() {
    return ['disabled'];
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'disabled') {
      this.shadowRoot.querySelector('button').disabled = newValue !== null;
    }
  }
}

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

使用时只需：Submit，它会自动渲染、响应属性变化，且样式不会影响页面其他部分。