自定义元素名必须含短横线（如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 = '

  hello

  

  Wechat Article Html

  将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

  下载
  '; }（不可靠）
• ⚠️ 注意：render() 方法应做防重入处理，比如加 if (this.shadowRoot?.firstChild) return;

attributeChangedCallback 只监听 observedAttributes 声明的属性

想响应 props 变化（比如 中的 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

使用 投影用户内容时，如果父组件动态修改了传入的子节点（比如 Vue/React 更新了 children），原生 slot **不会自动重渲染**，也不会触发 slotchange 事件——除非你主动在子节点变动后调用 this.dispatchEvent(new Event('slotchange'))（仅对部分浏览器有效），或者更稳妥地：监听 slot 元素的 slotchange 事件并手动刷新视图。

实际项目中，更常见也更可控的做法是：在 connectedCallback 或 adoptedCallback 中，给 绑定 slotchange 监听，并在回调里调用 this.render() 或局部更新。

• ✅ 示例：this.shadowRoot.querySelector('slot').addEventListener('slotchange', () => this.updateSlotContent());
• ⚠️ 注意：slotchange 在首次渲染时**不一定触发**，需在 connectedCallback 中补一次 this.updateSlotContent()
• ⚠️ 深层嵌套 slot（比如 ）需确保子组件也正确处理 slot 生命周期

Web Components 的核心约束很明确：命名、生命周期、属性监听、slot 行为，每一条都对应一个容易卡住的点。绕开它们谈“封装”或“复用”，最后都会在跨框架集成或动态更新时暴露出来。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！