Custom Elements 和 Shadow DOM 结合实现高度封装的自定义组件，通过定义标签、隔离样式、监听属性变化，支持内容分发与事件代理，可在任何现代浏览器中构建可复用、无框架依赖的 UI 组件。
Custom Elements 和 Shadow DOM 是 Web Components 的核心部分，它们让开发者可以创建可复用、封装良好的自定义 HTML 元素。这两项技术结合使用，能实现真正意义上的组件化开发，无需依赖框架也能构建结构清晰、样式隔离的 UI 组件。
Custom Elements：定义自己的 HTML 标签
Custom Elements 允许你创建新的 HTML 标签，并赋予其行为逻辑。通过 JavaScript 定义类并继承 HTMLElement，然后使用 customElements.define() 方法注册元素。
例如，你可以定义一个名为
class MyCard extends HTMLElement {
constructor() {
super();
// 可在此设置默认内容或事件监听
}
connectedCallback() {
this.innerHTML = `
}
}
customElements.define('my-card', MyCard);
之后就可以在页面中直接使用：
Shadow DOM：实现样式与结构的封装
Shadow DOM 提供了一个独立的 DOM 子树，与主文档 DOM 隔离。这意味着组件内部的样式不会影响外部页面，外部样式也不会意外修改组件内部结构。
在 Custom Element 中启用 Shadow DOM 很简单，只需在构造函数中调用 this.attachShadow({ mode: 'open' })：
constructor() {
super();
const shadow = this.attachShadow({ mode: 'open' });
shadow.innerHTML = `
}
这里用了
组合使用的优势
将 Custom Elements 和 Shadow DOM 结合，能实现高度封装的组件：
- 自定义标签语义清晰，提升代码可读性
- 样式和结构完全隔离，避免全局污染
- 支持响应属性变化，可在 observedAttributes 中监听属性更新
- 无需框架即可在任何项目中使用，兼容现代浏览器
比如添加属性监听：
static get observedAttributes() { return ['title']; }
attributeChangedCallback(name, oldValue, newValue) {
if (name === 'title') {
this.shadowRoot.querySelector('.card').textContent = newValue;
}
}
基本上就这些。掌握 Custom Elements 和 Shadow DOM 后，你可以写出真正独立、可移植的 Web 组件，为复杂应用提供干净的 UI 模块化方案。不复杂但容易忽略细节，比如正确使用 slot 和处理事件代理。
