自定义元素是现代web组件的强制前提，需用含连字符的合法名称注册，constructor仅限基础初始化，connectedcallback处理挂载逻辑，attributechangedcallback须显式声明observedattributes。
自定义元素不是“可选增强”，而是现代 Web 组件的强制前提——没注册 customElements.define()，就不存在真正的封装组件。
自定义元素名必须含连字符
浏览器用连字符（-）区分原生标签和自定义标签。写成 mybutton 或 MyButton 会直接抛错：Failed to execute 'define' on 'CustomElementRegistry': The name "mybutton" is not a valid custom element name。
- 合法名：
my-button、user-card、wc-tabs - 非法名：
mybutton、MyButton、div、html（不能与原生标签重名） - 注册后不可覆盖：重复调用
customElements.define('my-button', ...)会报CustomElementRegistry.define: 'my-button' has already been defined
constructor 中只能做基础初始化
constructor 是唯一允许同步操作 DOM 的生命周期钩子，但仅限于创建 Shadow DOM 或设置初始属性；不能访问 this.shadowRoot 以外的外部 DOM，也不能触发事件或发起网络请求。
- ✅ 可做：
this.attachShadow({mode: 'open'})、this.count = 0、this.setAttribute('role', 'button') - ❌ 禁止：
document.querySelector(...)、this.dispatchEvent(...)、fetch(...) - ⚠️ 注意：
this.innerHTML = '...'会绕过 Shadow DOM，破坏封装性——除非你明确不需要样式隔离
connectedCallback 是实际挂载逻辑的入口
元素真正插入 DOM 后才会触发 connectedCallback，这才是绑定事件、渲染模板、读取属性、操作外部资源的安全时机。
- 事件监听必须放这里：
this.shadowRoot.getElementById('inc').addEventListener(...) - 属性读取要校验：
const value = this.getAttribute('value'); if (value !== null) this.count = Number(value); - 避免重复绑定：如果组件可能被反复移入/移出 DOM，需在
disconnectedCallback中清理监听器 - 不要在这里修改自身属性（如
this.setAttribute('count', ...)），否则会触发attributeChangedCallback，造成循环
attributeChangedCallback 需手动声明 observedAttributes
浏览器不会自动监听所有属性变化。只有显式列出的属性，才会触发 attributeChangedCallback。
- 必须静态定义：
static get observedAttributes() { return ['disabled', 'value']; } - 值变更时回调接收字符串：
attributeChangedCallback(name, oldValue, newValue)—— 即使是布尔属性（如disabled），newValue也是""或null，不是true/false - 首次初始化时不会触发该回调，只响应后续 DOM 属性变更（如
el.setAttribute('value', '5')）
真正难的不是写对语法，而是判断哪个逻辑该放在哪个生命周期里——漏掉 disconnectedCallback 清理会导致内存泄漏，过早操作外部 DOM 会引发竞态，而把属性解析逻辑塞进 constructor 则会让 SSR 或服务端渲染失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
