17370845950

Web Components 是一套创建可重用、独立自定义 HTML 元素的技术，由 Custom Elements、Shadow DOM 和 HTML Templates 三项核心技术组成；通过它们可封装组件的结构、样式与行为，实现跨框架复用。示例中定义了 my-card 自定义元素，利用 Shadow DOM 隔离作用域，template 声明模板内容，并通过 observedAttributes 监听属性变化以实现动态更新，适用于构建高内聚、低耦合的 UI 组件库。

Web Components 是一套可以让开发者创建可重用、独立、自定义 HTML 元素的技术。它不依赖任何框架，原生支持现代浏览器，是实现组件化开发的重要方式之一。在 JavaScript 中使用 Web Components，能让你像使用 或 一样，定义自己的标签并封装样式、结构和行为。

什么是 Web Components？

Web Components 由三项核心技术组成：

• Custom Elements：允许你定义新的 HTML 标签。
• Shadow DOM：提供封装能力，让组件的样式和结构与页面其他部分隔离。
• HTML Templates（ 和 ）：用于声明组件的可复用模板内容。

这些技术共同作用，使你能够构建出真正解耦、可移植的 UI 组件。

如何创建一个自定义元素

通过 Custom Elements API，你可以注册一个新标签。下面是一个简单的例子：

class MyCard extends HTMLElement {
  constructor() {
    super();
    // 创建 Shadow DOM 来封装内部结构
    const shadow = this.attachShadow({ mode: 'open' });

    // 定义模板
    const template = document.createElement('template');
    template.innerHTML = `
      
      
        
默认标题
        
默认内容
      
    `;

    // 将模板内容插入 Shadow DOM
    shadow.appendChild(template.content.cloneNode(true));
  }
}

// 注册自定义元素
customElements.define('my-card', MyCard);

之后就可以在 HTML 中使用：

  欢迎使用 Web Components
  这是一个可复用的卡片组件。

理解 Shadow DOM 的作用

Shadow DOM 是 Web Components 的核心之一。它创建了一个独立的作用域，确保组件内的 CSS 不会污染全局样式，同时外部样式也不会意外影响组件内部。

在上面的例子中，this.attachShadow({ mode: 'open' }) 创建了一个开放的 Shadow Root。设置为 'closed' 后，外部无法访问该 Shadow DOM，适合更高封装需求。

你可以通过 shadowRoot 属性操作内部节点（仅限 mode: 'open'）：

const card = document.querySelector('my-card');
console.log(card.shadowRoot); // 可访问

组件通信与属性响应

为了让组件更灵活，通常需要支持属性传值和响应变化。可以通过 observedAttributes 和静态 getter 实现：

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

  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'title') {
      // 更新 slot 内容或内部结构
      const titleSlot = this.shadowRoot.querySelector('[slot="title"]');
      if (titleSlot) {
        titleSlot.textContent = newValue;
      }
    }
    if (name === 'color') {
      this.shadowRoot.querySelector('.card').style.borderColor = newValue;
    }
  }
}

然后这样使用：

当属性变化时，attributeChangedCallback 会被触发，实现动态更新。

基本上就这些。Web Components 提供了干净、标准的组件化方案，适合构建设计系统、跨框架组件库或嵌入式小工具。虽然学习曲线略陡，但一旦掌握，就能写出真正独立、可维护的 UI 模块。