JavaScript Web Components组件化开发_技术教程_奈瑶·映南科技互联网学院

Web Components通过Custom Elements、Shadow DOM和HTML Templates实现组件化，支持自定义标签、样式隔离与模板复用，结合属性监听可实现响应式更新。

Web Components 是一套可以让开发者创建可重用、独立、封装良好的自定义 HTML 元素的技术。结合 JavaScript，它为前端组件化开发提供了一种原生的解决方案，无需依赖框架即可实现组件的封装与复用。

核心构成：三大技术基础

Web Components 由三个主要技术组成：

Custom Elements：允许你定义自己的 HTML 标签，浏览器可以识别并实例化这些元素。
Shadow DOM：提供一个隔离的 DOM 环境，确保组件内部的样式和结构不会被外部影响，也不会影响全局。
HTML Templates（和）：用于声明组件的结构模板，延迟渲染直到被实例化。

这三项技术共同作用，让组件具备高内聚、低耦合的特性。

定义一个自定义元素

使用 customElements.define() 方法注册一个新标签。你需要继承 HTMLElement 或其子类来创建类。

例如，创建一个名为的卡片组件：

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

    const template = document.createElement('template');
    template.innerHTML = `
      
      
        默认标题
        默认内容
      
    `;

    shadow.appendChild(template.content.cloneNode(true));
  }
}

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

之后就可以在 HTML 中使用：


  这是标题
  这是主体内容

属性与响应式更新

为了让组件更具交互性，可以通过监听属性变化来更新 UI。

使用 static get observedAttributes() 定义需要监听的属性：

class MyCard extends HTMLElement {
  static get observedAttributes() {
    return ['title', 'theme'];
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'title') {
      // 更新标题插槽或内部结构
      const titleSlot = this.shadowRoot.querySelector('slot[name="title"]');
      // 实际中可能需要更复杂的处理，比如重新渲染
    }
    if (name === 'theme') {
      this.shadowRoot.querySelector('.card').style.background =
        newValue === 'dark' ? '#333' : '#f9f9f9';
      this.shadowRoot.querySelector('.card').style.color =
        newValue === 'dark' ? '#fff' : '#000';
    }
  }
}

这样调用时传入属性即可触发变化：