Web Components 开发与集成

以下是关于 Web Components 开发与集成 的系统知识梳理，涵盖核心概念、高级特性、集成与优化等内容：

---

一、Web Components 核心概念

技术	作用	核心 API
Custom Elements	定义可复用的自定义 HTML 元素	customElements.define()、生命周期钩子（connectedCallback 等）
Shadow DOM	封装组件内部 DOM 和样式，避免全局污染	Element.attachShadow({ mode: 'open' })、:host 伪类
HTML Templates	声明可复用的 HTML 片段	<template> 标签、document.importNode()
HTML Imports	（已废弃）模块化加载组件，现被 ES Modules 替代	<link rel="import" href="component.html">（历史方案）

---

二、基础开发流程

1. 创建自定义元素

class MyButton extends HTMLElement {constructor() {super();// 创建 Shadow DOMthis.attachShadow({ mode: 'open' });// 添加模板内容this.shadowRoot.innerHTML = `<style>button { color: red; }</style><button><slot></slot></button>`;}// 生命周期：元素插入 DOM 时触发connectedCallback() {this.shadowRoot.querySelector('button').addEventListener('click', this.handleClick);}// 生命周期：元素从 DOM 移除时触发disconnectedCallback() {this.shadowRoot.querySelector('button').removeEventListener('click', this.handleClick);}handleClick = () => {this.dispatchEvent(new CustomEvent('my-click', { detail: 'Clicked!' }));};
}// 注册自定义元素
customElements.define('my-button', MyButton