前端Wiki/词条/Web Components

Web Components

定义浏览器原生组件化标准：自定义元素 + Shadow DOM + HTML 模板的组合技术

Web Components 是 W3C 的原生组件方案，三件套缺一不可：自定义元素（customElements.define 注册新标签）、Shadow DOM（attachShadow 创建样式隔离的封闭 DOM）、template（可复用的 HTML 片段模板）。

它的价值是「框架无关」：用原生标准写的组件，React、Vue、纯 HTML 都能直接用。React/Vue 项目里也常把无框架依赖的通用组件（如日期选择器）做成 Web Component。

Shadow DOM 内样式默认隔离，外部选择器打不进去；
用 attribute / property / event 与外部通信；
老浏览器需 polyfill（@webcomponents/webcomponentsjs）。

JavaScript

class MyCard extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: 'open' });
    shadow.innerHTML = `
      <style>h2 { color: #2f81f7; }</style>
      <h2><slot></slot></h2>`;                 // slot 接收外部内容
  }
}
customElements.define('my-card', MyCard);

// 使用：<my-card>标题文字</my-card>

⚠ 常见误区

自定义元素名必须含连字符，防止与原生标签冲突
Shadow DOM 里表单样式重置要自己做（不会继承全局样式）
attribute 变化用 observedAttributes + attributeChangedCallback 监听

🔗 相关词条页面结构标签渐进增强组件 props