17370845950

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 = `
      
      Click me
    `;
    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，它会自动渲染、响应属性变化，且样式不会影响页面其他部分。

为什么说它是“原生组件化”

不同于 React/Vue 等框架的组件抽象，Web Components 直接运行在浏览器引擎层：

• 无需框架即可在任何现代浏览器中运行（Chrome 54+、Firefox 63+、Safari 10.1+、Edge 79+）
• 组件可跨框架使用（React 项目里能直接用 ，Vue 项目也能用）
• 天然支持 HTML 语义、可访问性（a11y）、SEO，因为本质就是扩展的 HTML 元素

实际开发中怎么用更高效

纯原生写法略繁琐，推荐结合工具提升体验：

• 用 lit（轻量级库）简化模板、响应式属性、更新逻辑，几行代码就能写出高性能组件
• 用 Storybook 单独开发和测试组件，不依赖主应用上下文
• 通过 npm 包 + 自定义元素名前缀（如 my-company-button）避免命名冲突，便于团队共享组件库

基本上就这些。不复杂但容易忽略的是：Web Components 不是替代框架，而是补足底层能力——它让组件真正“可移植”，也让框架更专注上层交互逻辑。