customelements.define() 成功≠组件可测；需确保名称合法、同步注册、等待connectedcallback执行、显式访问shadowroot、手动同步初始属性。
customElements.define() 调用成功 ≠ 组件可测；没做 DOM 就断言、没等 connectedCallback 就查属性、样式不进 Shadow DOM —— 这些都会让测试直接“假失败”。
测试前必须确保 customElements.define() 已注册且无报错
浏览器对自定义元素名校验极严，注册失败时不会抛出常规异常，而是静默拒绝或直接报 DOMException: The name "xxx" is not a valid custom element name。一旦注册失败，后续所有 document.createElement('my-button') 都会返回普通 HTMLUnknownElement，导致所有属性/事件/Shadow DOM 断言全崩。
- 检查名称是否含连字符、全小写（
my-button✅，MyButton❌，button❌） - 避免在测试脚本执行前动态加载组件代码 —— 确保
customElements.define('my-button', MyButton)在test()之前已同步执行 - 可在测试开头加一行
console.assert(customElements.get('my-button'), 'my-button not defined')快速兜底
测试中要等 connectedCallback 完成后再断言 DOM 状态
构造函数 constructor 里只允许调 super() 和 this.attachShadow()，真实 DOM 渲染、属性读取、事件绑定全在 connectedCallback 里发生。测试若在元素 append 到 document 后立刻查 shadowRoot.innerHTML 或 this.getAttribute('label')，大概率拿到空值或 null。
- 用
await Promise.resolve()或await new Promise(r => setTimeout(r, 0))让 microtask / task 队列清空，确保connectedCallback已执行 - 更稳妥的做法：监听
customElements.whenDefined('my-button')，再创建实例并document.body.appendChild(el)，最后 await 一次微任务 - 别依赖
el.offsetWidth或el.clientHeight做“渲染完成”判断 —— 它们可能因 CSS 加载延迟而为 0
测试 Shadow DOM 内容必须显式访问 shadowRoot
Shadow DOM 天然隔离，el.querySelector() 查不到内部节点，getComputedStyle(el) 也拿不到内部样式。想验证模板结构或样式生效，必须通过 el.shadowRoot 下钻。
- 先断言
el.shadowRoot !== null，否则后续所有操作都无效 - 验证 HTML 结构：用
el.shadowRoot.querySelector('button')替代el.querySelector('button') - 验证样式：用
getComputedStyle(el.shadowRoot.querySelector('span')).color，而非getComputedStyle(el).color - 如果用了
mode: 'closed'，shadowRoot为null—— 测试必须用mode: 'open'，这是唯一可测模式
attributeChangedCallback 不触发初始值，测试需手动补读
attributeChangedCallback 只响应 DOM 属性的**变更**，不响应元素创建时的初始属性（如 <my-input value="abc"></my-input> 中的 value="abc"）。这意味着测试里若只靠回调更新内部状态，首次渲染就会漏掉值。
- 必须在
connectedCallback中手动调用this.getAttribute('value')或this.value = this.getAttribute('value')同步初始值 - 测试时要分别覆盖两种场景：带初始属性创建后立即断言，以及创建后
el.setAttribute('value', 'xyz')再断言回调是否触发 + 内部状态是否更新 - 注意：
observedAttributes数组必须显式声明，漏写会导致回调根本不会被调用
connectedCallback 没等、shadowRoot 没判空、初始属性没手动同步。这些点不显眼，但一漏就全盘失准。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
