JavaScript Web Component 是浏览器原生 API，由 Custom Elements、Shadow DOM 和 HTML Templates 组成，用于创建可复用、封装良好的自定义元素；需继承 HTMLElement、命名含短横线、用 customElements.define() 注册，并通过 observedAttributes 和 attributeChangedCallback 实现响应式更新，Shadow DOM 提供样式隔离，template 标签提升结构可维护性。
JavaScript Web Component 是一套浏览器原生支持的 API，用于创建可复用、封装良好的自定义 HTML 元素。它不是框架，也不依赖第三方库，而是由 Custom Elements、Shadow DOM 和 HTML Templates 三部分组成，让开发者能像使用 <button> 或 <input> 那样，定义并使用自己的标签，比如 <my-tabs> 或 <date-picker>。
如何注册一个自定义元素（Custom Element）
必须继承 HTMLElement，并用 customElements.define() 注册。名称中必须包含短横线（-），这是强制规则，防止与未来 HTML 标准冲突。
- 定义类：例如
class MyCard extends HTMLElement { ... } - 添加生命周期钩子：如
connectedCallback()（插入 DOM 时触发）、disconnectedCallback()（移除时）、attributeChangedCallback()（属性变更时） - 注册：调用
customElements.define('my-card', MyCard)，之后就能在 HTML 中写<my-card></my-card>
如何用 Shadow DOM 封装样式和结构
Shadow DOM 提供真正的作用域隔离——内部样式不会泄漏到外部，外部 CSS 也不会影响内部渲染，避免全局污染。
- 在
constructor()或connectedCallback()中调用this.attachShadow({ mode: 'open' }) -
mode: 'open'允许 JS 从外部访问 shadow root；'closed'则禁止（一般不用） - 把模板内容或手动创建的节点 append 到
this.shadowRoot，例如：this.shadowRoot.innerHTML = '<style>h2{color:blue}</style><h2>Hello</h2>'
如何支持属性和响应式更新
自定义元素可通过 HTML 属性传参，并监听变化自动更新 UI。关键在于声明 observedAttributes 静态 getter 并实现 attributeChangedCallback。
立即学习“Java免费学习笔记（深入）”；
- 在类中添加：
static get observedAttributes() { return ['title', 'disabled']; } - 在
attributeChangedCallback(name, oldValue, newValue)中处理逻辑，比如更新 shadow 内容或切换 class - 注意：只有已声明的属性才会触发该回调；布尔属性（如
disabled）值为''或null，需用this.hasAttribute('disabled')判断
如何用 HTML Template 提升可读性和性能
把结构和样式提前写在 <template> 标签里，避免拼接字符串，也便于复用和维护。
- 在 HTML 中定义：
<template id="my-card-tpl"><style>...</style><div><slot></slot></div></template> - 在 JS 中获取：
const tpl = document.getElementById('my-card-tpl').content.cloneNode(true) - 用
slot实现内容分发（类似 Vue 的 slot 或 React 的 children），支持具名插槽如<slot name="footer"></slot>
