Web Components 是浏览器原生支持的可复用、封装良好、与框架无关的自定义 HTML 元素标准，通过 customElements.define() 注册继承 HTMLElement 的类实现，需含短横线命名（如 my-button），配合 shadow DOM 封装样式与结构，并利用生命周期回调管理行为。
Web Components 是一套浏览器原生支持的前端技术标准，它让开发者能创建可复用、封装良好、与框架无关的自定义 HTML 元素。JavaScript 创建自定义元素，核心是通过 customElements.define() 注册一个继承自 HTMLElement 的类，从而扩展 HTML 的能力。
自定义元素必须满足命名规则
浏览器要求自定义元素名必须包含短横线（-），比如 my-button、data-chart，不能是单个单词如 button 或驼峰式 myButton。这是为了确保与未来 HTML 标准新增的原生标签不冲突。
- ✅ 合法：
<user-profile></user-profile> - ❌ 非法：
<userprofile></userprofile>、<UserProfile></UserProfile>
用 class 继承 HTMLElement 定义行为
自定义元素本质是一个 JavaScript 类，需继承 HTMLElement，并在其中定义生命周期回调（如 connectedCallback、disconnectedCallback）和属性响应逻辑（配合 static get observedAttributes()）。
-
constructor：初始化 shadow DOM、设置初始状态（注意不能在此操作 DOM） -
connectedCallback：元素插入文档时触发，适合渲染、绑定事件 -
attributeChangedCallback：当受监听的属性变更时调用，用于响应 props 变化 -
disconnectedCallback：元素从 DOM 移除时清理资源（如取消定时器、解绑事件）
用 shadow DOM 实现样式与结构封装
在 constructor 中调用 this.attachShadow({ mode: 'closed' }) 或 'open'，即可为元素创建独立的影子 DOM 树。内部样式不会泄漏到外部，外部样式也默认无法影响内部，实现真正的样式隔离。
立即学习“Java免费学习笔记（深入）”；
-
mode: 'open'：可通过element.shadowRoot访问，方便调试和测试 -
mode: 'closed'：shadowRoot返回null，增强封装性（但一般开发中较少用） - 推荐在 shadow DOM 内部用
<style>标签写 CSS，或动态注入样式表
注册元素并使用
定义好类后，调用 customElements.define('tag-name', Class) 完成注册。之后就能像普通 HTML 标签一样在页面中使用，支持属性、事件、插槽（<slot>）等标准特性。
- 注册示例：
customElements.define('hello-world', HelloWorld); - 使用示例：
<hello-world name="Alice"></hello-world> - 支持 JS 操作：
document.querySelector('hello-world').name = 'Bob';
不复杂但容易忽略细节：属性名和 JS 属性名可能不同（如 HTML 属性 user-id 对应 JS 的 userId），需在 attributeChangedCallback 中手动转换；另外，自定义元素在 DOM 中被解析时，若尚未注册，会作为 HTMLUnknownElement 存在，后续注册也不会自动升级——所以建议尽早注册，或使用 customElements.whenDefined() 等待加载完成。
