My doc

主题

Web Component ​

Web Components 是一套不同的浏览器技术，允许您创建可重用的自定义元素，这些元素的功能封装在您的代码之外，可以在 Web 应用中使用。

概述 ​

Web Components 提供了一种创建可重用的自定义 HTML 元素的方法，这些元素完全封装了自己的功能，并且可以在不同的 Web 项目中重复使用。这项技术基于开放的 Web 标准，不需要任何外部库或框架即可工作。

核心技术 ​

Web Components 建立在三项主要技术之上，这些技术可以单独使用，也可以一起使用来创建功能强大的自定义元素：

1. Custom Elements ​

Custom Elements API 允许您定义自定义元素及其行为，然后可以在您的用户界面中按照需要使用它们。

javascript
class MyElement extends HTMLElement {
  constructor() {
    super()
    // 元素创建时的操作
  }
  
  connectedCallback() {
    // 元素插入到 DOM 时的操作
    this.innerHTML = '<p>Hello World</p>'
  }
}

// 定义新的元素
customElements.define('my-element', MyElement)

使用方式：

html
<my-element></my-element>

2. Shadow DOM ​

Shadow DOM API 提供了一种将封装的"影子"DOM 树附加到元素（与主文档 DOM 分开呈现）的方法，并可以控制其关联的功能。通过这种方式，您可以保持元素的功能私有，这样它们就可以被脚本化和样式化，而不用担心与页面的其他部分发生冲突。

javascript
class MyShadowElement extends HTMLElement {
  constructor() {
    super()
    
    // 创建 shadow root
    const shadow = this.attachShadow({mode: 'open'})
    
    // 创建元素内容
    const wrapper = document.createElement('div')
    wrapper.innerHTML = '<p>这是 Shadow DOM 内容</p>'
    
    // 添加到 shadow DOM
    shadow.appendChild(wrapper)
  }
}

customElements.define('my-shadow-element', MyShadowElement)

3. HTML Templates ​

<template> 和 <slot> 元素使您可以编写不在页面中呈现的标记模板。然后它们可以作为自定义元素结构的基础被多次重用。

html
<template id="my-template">
  <div>
    <h2>模板标题</h2>
    <p>模板内容</p>
    <slot name="content">默认内容</slot>
  </div>
</template>

优势 ​

  1. 原生支持 - 基于浏览器原生 API，无需外部依赖
  2. 封装性强 - 使用 Shadow DOM 实现样式和逻辑的封装
  3. 可重用性 - 创建一次，到处使用
  4. 互操作性 - 与任何框架或库兼容
  5. 标准化 - 基于 Web 标准，长期稳定

浏览器兼容性 ​

现代浏览器对 Web Components 的支持情况良好：

  • Chrome: 原生支持
  • Firefox: 原生支持
  • Safari: 原生支持
  • Edge: 原生支持

对于旧版浏览器，可以使用 polyfill 增加支持。

实际应用 ​

Web Components 可以用于各种场景：

  1. UI 组件库（按钮、卡片、表单控件等）
  2. 复杂的可视化组件（图表、地图等）
  3. 第三方 widgets 和 embeds
  4. 应用程序特定的组件

相关资源 ​