Web Components 是浏览器原生组件化方案，含 Custom Elements、Shadow DOM 和 HTML Templates；Custom Elements 需继承 HTMLElement、类名含短横线、用 define() 注册；关键钩子为 connectedCallback 和 attributeChangedCallback；Shadow DOM 提供样式与脚本隔离。
Web Components 是浏览器原生支持的一套组件化方案，不是框架，也不依赖构建工具
它由三部分组成：Custom Elements（自定义元素）、Shadow DOM（影子 DOM）、HTML Templates（<template> 和 <slot>）。其中最常用、最易上手的是 Custom Elements —— 它让你用 JS 注册一个带行为的 HTML 标签，比如 <my-button>，浏览器会识别并实例化它。
用 customElements.define() 创建自定义元素，必须继承 HTMLElement
不能直接传入普通函数或对象，必须是类（或构造函数），且必须 extends HTMLElement。否则会报错：Failed to execute 'define' on 'CustomElementRegistry': Class constructor X cannot be invoked without 'new'。
- 类名必须包含短横线（
-），如MyButton❌，my-button✅ - 不能重定义已存在的原生标签（如
div、button） - 注册前必须确保类已声明（不能在
define()后才class MyEl extends HTMLElement { ... }）
class CounterButton extends HTMLElement {
constructor() {
super();
this.count = 0;
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
<button><slot>Click me</slot> (${this.count})</button>
<style>button { font: inherit; }</style>
`;
}
connectedCallback() {
this.shadowRoot.querySelector('button').addEventListener('click', () => {
this.count++;
this.shadowRoot.querySelector('button').textContent =
`${this.getAttribute('label') || 'Click me'} (${this.count})`;
});
}
}
customElements.define('counter-button', CounterButton);
connectedCallback 和 attributeChangedCallback 是关键生命周期钩子
它们不是可选的“增强功能”，而是处理真实交互和响应属性变化的核心入口。漏掉 connectedCallback，DOM 插入后逻辑不会自动触发；不监听 observedAttributes 并实现 attributeChangedCallback，就无法响应 setAttribute() 或属性绑定变更。
-
connectedCallback：元素被插入文档时触发（可多次），适合绑定事件、发起请求、初始化 Shadow DOM -
disconnectedCallback：从文档移除时触发，适合清理定时器、事件监听器 - 若需响应属性变化，必须静态声明
observedAttributes数组，并在attributeChangedCallback(name, oldVal, newVal)中处理 - 只对
string类型属性生效；布尔/数字/对象需手动转换（例如用this.hasAttribute('disabled')判断布尔值）
自定义元素不能直接写内联样式或全局脚本，Shadow DOM 天然隔离
这是优点也是约束点：你在 shadowRoot.innerHTML 里写的 <style> 不会影响外部，外部 CSS 也默认进不了 Shadow DOM（除非用 ::part() 或 :host 显式穿透）。但这也意味着：
立即学习“Java免费学习笔记（深入）”；
- 不能靠外部
<link rel="stylesheet">注入样式到 Shadow DOM 内部（得用fetch+innerHTML或adoptedStyleSheets） - 不能在 Shadow DOM 里直接执行
<script>（会被忽略） -
<slot>是内容分发出口，但仅能分发 Light DOM 的子节点，不能跨 Shadow 边界“穿透”渲染
如果需要复用样式，推荐用 CSSStyleSheet 实例配合 adoptedStyleSheets，而不是拼接字符串 —— 更安全、支持 HMR、避免重复解析。
