自定义元素名必须含短横线（如my-button），constructor中不可操作shadowRoot，需在connectedCallback中渲染；attributeChangedCallback需配合observedAttributes使用；slot内容更新需手动监听slotchange事件。
自定义元素必须用连字符命名，否则浏览器直接忽略
浏览器强制要求 customElements.define() 注册的标签名中**必须包含短横线（-）**，比如 my-button 合法，mybutton 或 MyButton 会抛出 DOMException: Failed to execute 'define' on 'CustomElementRegistry': The name "mybutton" is not a valid custom element name。
这是硬性规范，不是建议。原因在于避免与未来 HTML 原生标签冲突，所以所有自定义元素名都必须是“破折号分隔式”（kebab-case）。
- ✅ 正确：
customElements.define('data-table', DataTable) - ❌ 错误：
customElements.define('datatable', DataTable)（无短横线） - ❌ 错误：
customElements.define('DataTable', DataTable)（首字母大写 + 无短横线）
constructor 中不能操作 this.shadowRoot，得等 connectedCallback
在自定义元素类的 constructor 里，this.shadowRoot 还不存在——此时 DOM 尚未挂载，调用 this.attachShadow({mode: 'open'}) 是允许的，但若紧接着就往里面 appendChild 或设置 innerHTML，极大概率失败或被静默丢弃，尤其在 SSR 或框架嵌套场景下更不稳定。
真正安全的操作时机是 connectedCallback：它保证元素已插入文档、shadowRoot 已就绪、且只在首次连接时触发一次（注意：可能被多次调用，如果元素被移出又重新插入）。
立即学习“前端免费学习笔记（深入）”；
- ✅ 推荐：
connectedCallback() { this.render(); }，把模板渲染逻辑放这里 - ❌ 避免：
constructor() { this.attachShadow({mode:'open'}); this.shadowRoot.innerHTML = '<p>hello</p>'; }（不可靠） - ⚠️ 注意：
render()方法应做防重入处理，比如加if (this.shadowRoot?.firstChild) return;
attributeChangedCallback 只监听 observedAttributes 声明的属性
想响应 props 变化（比如 <my-input value="abc"></my-input> 中的 value），不能只写 attributeChangedCallback，还必须在类上显式声明静态 getter observedAttributes，否则该回调根本不会触发。
而且，只有通过 setAttribute()、removeAttribute() 或 HTML 属性初始值变更才会进入此回调；JS 直接赋值 el.value = 'xxx' 不会触发（因为没改 attribute，只改了 property）。
- ✅ 必须写：
static get observedAttributes() { return ['value', 'disabled']; } - ✅ 回调内区分 old/new：
attributeChangedCallback(name, oldValue, newValue) { if (name === 'value') this.inputEl.value = newValue; } - ⚠️ 注意：字符串比较要小心
null和空字符串，oldValue初始值可能是null，不是undefined
slot 内容投影默认不响应内部更新，需手动 dispatch slotchange
使用 <slot></slot> 投影用户内容时，如果父组件动态修改了传入的子节点（比如 Vue/React 更新了 children），原生 slot **不会自动重渲染**，也不会触发 slotchange 事件——除非你主动在子节点变动后调用 this.dispatchEvent(new Event('slotchange'))（仅对部分浏览器有效），或者更稳妥地：监听 slot 元素的 slotchange 事件并手动刷新视图。
实际项目中，更常见也更可控的做法是：在 connectedCallback 或 adoptedCallback 中，给 <slot></slot> 绑定 slotchange 监听，并在回调里调用 this.render() 或局部更新。
- ✅ 示例：
this.shadowRoot.querySelector('slot').addEventListener('slotchange', () => this.updateSlotContent()); - ⚠️ 注意：
slotchange在首次渲染时**不一定触发**，需在connectedCallback中补一次this.updateSlotContent() - ⚠️ 深层嵌套 slot（比如
<slot name="header"><my-title></my-title></slot>）需确保子组件也正确处理 slot 生命周期
