Web Components 是浏览器原生支持的可复用、封装良好的自定义 HTML 元素，核心包括 customElements、HTMLElement 和 Shadow DOM；需继承 HTMLElement、含短横线命名、调用 customElements.define() 注册，并用 attachShadow 隔离样式与事件。
Web Components 是什么？它不是框架，而是浏览器原生能力
Web Components 是一组浏览器内置的 API，让你能创建可复用、封装良好的自定义 HTML 元素。它不依赖 React 或 Vue，也不需要构建工具——只要现代浏览器（Chrome 67+、Firefox 63+、Safari 16.4+、Edge 79+）就支持。核心是三个接口：customElements、HTMLElement 和 Shadow DOM。其中 customElements.define() 是注册自定义元素的唯一入口，没调用它，元素就不会被识别。
如何用 class 定义并注册一个自定义元素？
必须继承 HTMLElement，且类名中必须包含短横线（-），比如 my-button 合法，MyButton 或 mybutton 会报错 Failed to execute 'define' on 'CustomElementRegistry': The name provided ('mybutton') is not a valid custom element name。
class MyButton extends HTMLElement {
constructor() {
super();
// 必须调用 super()，否则 this 未初始化
const shadow = this.attachShadow({ mode: 'open' });
const button = document.createElement('button');
button.textContent = this.getAttribute('label') || 'Click me';
button.addEventListener('click', () => this.dispatchEvent(new Event('click', { bubbles: true })));
shadow.appendChild(button);
}
}
customElements.define('my-button', MyButton); // 名字必须小写+短横线
注册后就能直接在 HTML 中使用：Unknown custom element 警告（尤其在动态插入时）。
为什么 Shadow DOM 是关键？它隔离了样式和事件
不加 attachShadow()，你的自定义元素只是个空壳，样式和脚本会泄漏进全局作用域，和普通 div 没区别。加了之后，内部结构、CSS、事件默认不会穿透到宿主文档，也不会被宿主样式污染。常见误区：
-
mode: 'closed'会让shadowRoot不可访问（连this.shadowRoot都是null），调试困难，除非有强封装需求，否则用'open' - 想让宿主 CSS 影响内部元素？不行——得用
::slotted或 CSS 自定义属性（var(--color)）透传 - 子元素事件默认不冒泡出 Shadow DOM，需手动设
{ bubbles: true }才能在外层监听
生命周期回调里该做什么？别在 connectedCallback 里重复初始化
四个标准回调：constructor、connectedCallback、disconnectedCallback、attributeChangedCallback。重点：
-
constructor：只做最小初始化（如super()、attachShadow、绑定事件），不能访问this.innerHTML或查询父节点 -
connectedCallback：元素被插入 DOM 时触发，适合发起网络请求、启动定时器；但可能被多次调用（移入移出），记得用if (!this._initialized)防重入 -
attributeChangedCallback：需在observedAttributes静态 getter 中声明监听哪些属性，比如static get observedAttributes() { return ['disabled']; }，否则不会触发
复杂状态管理或异步渲染逻辑，建议封装成独立方法，避免把所有逻辑堆在回调里。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
