# Web Components
Web Components 是一套由现代浏览器原生支持的组件化技术，允许开发者创建可重用、封装良好的自定义 HTML 元素。其核心由以下四项技术构成：
# 1. Custom Elements（自定义元素）
- 作用：通过 JavaScript 定义新的 HTML 标签，扩展浏览器的内置元素。
- 示例：
```js
class MyButton extends HTMLElement {
constructor() {
super();
this.addEventListener('click', () => alert('Clicked!'));
}
}
customElements.define('my-button', MyButton);
```
```js
<my-button>点我</my-button>
```
生命周期：提供connectedCallback（挂载）、disconnectedCallback（卸载）等方法，用于管理组件的状态。
# 2. Shadow DOM（影子DOM）
作用：将组件的内部结构、样式与外部 DOM 隔离，避免 CSS 和 JavaScript 的全局污染。
示例：
class MyComponent extends HTMLElement {
constructor() {
super();
const shadow = this.attachShadow({ mode: 'open' });
shadow.innerHTML = <style>p { color: blue; }</style> <p>封装的内容</p>;
}
}
模式：mode: 'open'允许外部访问 Shadow DOM，closed则完全隔离。
# 3. HTML Templates（模板）
作用：通过 标签定义可复用的 HTML 片段，仅在需要时渲染。 示例：