customElements.define()注册后组件没反应，需检查三件事：事件监听必须放在connectedCallback()中；attributeChangedCallback()仅响应setAttribute()等操作，JS属性赋值需手动同步；Shadow DOM中CSS变量需通过:host注入或外部传递。
customElements.define()注册后组件没反应？检查三件事
注册只是让浏览器认识标签名，不自动绑定事件、不监听属性、不渲染 UI。常见错误是把事件监听写在 constructor() 里，此时 this.shadowRoot 虽已存在，但内部节点还没挂载，querySelector() 返回 null，监听器根本没绑上。
- 事件逻辑必须放在
connectedCallback()中——确保元素已插入 DOM -
attributeChangedCallback()只对setAttribute()、removeAttribute()和初始 HTML 属性生效，el.checked = true这类 JS 属性赋值不会触发它 - 若需支持 JS 属性与 HTML 属性同步（比如外部代码调用
myToggle.checked = true同时更新 UI），得在 setter 里显式调用this.setAttribute('checked', 'true')
attributeChangedCallback 怎么监听布尔属性才不出错
布尔属性（如 disabled、checked）的 newValue 是字符串 "true" 或 null，不是布尔值；首次初始化时 oldValue 恒为 null，直接用 === 判断会误判。
- 必须在
static get observedAttributes()中显式列出要监听的属性名，漏一个就收不到回调 - 判断布尔变更推荐用
oldValue !== newValue，或转换后再比：input.checked = newValue !== null - 不要在
constructor()里读取this.getAttribute('disabled')并设状态——此时属性可能还没解析完，应统一在connectedCallback()或attributeChangedCallback()中处理
Shadow DOM 中 CSS 变量为什么不生效
你在根文档写了 :root { --primary-color: #007bff; }，但在 shadowRoot 的 <style> 里写 color: var(--primary-color); 却 fallback 了——因为 Shadow DOM 是样式边界，var() 查找范围仅限于 shadow 内部，不会穿透到外层。
- 想暴露主题变量，必须手动把变量注入 shadowRoot：
this.shadowRoot.querySelector('style').textContent += `:host { --primary-color: ${getComputedStyle(document.documentElement).getPropertyValue('--primary-color')}; }` - 更稳妥的做法是通过
:host接收外部传入的变量：:host { --primary-color: #007bff; }，再在内部样式中使用 - 避免用
mode: 'closed'——它会让shadowRoot返回null，调试时连 DevTools 都打不开结构，绝大多数场景选mode: 'open'更实际
如何让自定义元素真正参与表单提交和校验
加个 role="button" 或 tabindex="0" 不等于有语义。搜索引擎、屏幕阅读器、表单序列化（form.elements）、:disabled 伪类、键盘激活（空格/Enter）全都不会生效。
立即学习“前端免费学习笔记（深入）”；
- 必须继承
HTMLElement并在constructor()中调用super() - 必须声明
static formAssociated = true，这是启用表单集成的开关 - 必须在 shadow 内创建真实控件（如
input或button），并桥接其value、checked、validity等属性到自定义元素上 - 必须实现
formDisabledCallback和formResetCallback，否则form.reset()和fieldset[disabled]下的行为完全失控
真正语义化的成本远高于视觉封装——它要求你补全原生行为契约，而不是只套一层 Shadow DOM。
