customelements.define()仅注册标签，不自动绑定交互；事件监听须在connectedcallback中进行，attributechangedcallback只响应html属性变更，shadow dom需手动传递css变量，状态变更必须显式触发重渲染。
customElements.define()注册后交互逻辑必须手动绑定
注册只是让浏览器认识这个标签，customElements.define()本身不注入任何事件、不响应属性变化、也不自动渲染。所有交互行为都得你自己写进去，否则组件就是个“空壳”。
常见错误是直接在 HTML 里写 <my-toggle onclick="handle()"></my-toggle>，或者在 constructor() 里查 this.shadowRoot.querySelector('button').addEventListener(...)——此时 shadowRoot 虽已存在，但元素还没挂到 DOM 上，querySelector 返回 null，监听器根本没绑上。
- 事件监听必须放在
connectedCallback()中，确保 DOM 已挂载 - 不要在
constructor()或disconnectedCallback()里操作shadowRoot内部节点（可能为空或已移除） - 若需支持外部 JS 直接调用方法（如
myToggle.toggle()），要在类上显式定义该方法，并保证它能访问到内部状态
attributeChangedCallback 只响应 HTML 属性变更
attributeChangedCallback 不会响应 JS 属性赋值，比如 el.checked = true 或 el.disabled = false 完全不会触发它。它只对 setAttribute()、removeAttribute() 和初始 HTML 中的属性生效。
这意味着：如果你希望组件的 JS 属性和 HTML 属性保持同步（例如用户代码写 toggle.checked = true，组件 UI 也要更新），就得自己补逻辑——通常是在 setter 里同时调用 setAttribute()。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 必须在
static get observedAttributes()中明确列出要监听的属性名，漏一个就收不到回调 -
oldValue在首次初始化时为null，别直接用===判断；建议用oldValue !== newValue或转换为布尔再比 - 布尔属性（如
checked、disabled）的newValue是字符串"true"或null，不是布尔值，需手动转换
Shadow DOM 中 CSS 变量无法自动穿透
你在页面根元素设了 :root { --primary-color: #007bff; }，但在组件 shadowRoot 的 <style></style> 里写 color: var(--primary-color);，结果颜色始终是 fallback 值——因为 Shadow DOM 是样式边界，var() 查找范围仅限于 shadowRoot 内部。
正确做法是主动从 light DOM 拿变量值，再注入到内部节点。不能依赖“自动继承”，也不能每帧都重复取值。
- 在
connectedCallback()或attributeChangedCallback()中调用getComputedStyle(this).getPropertyValue('--primary-color') - 把获取到的值通过
element.style.color = value或element.setAttribute('style', `color: ${value}`)显式设置 - 避免在
render()函数里无条件调用getComputedStyle，它开销不小；可缓存值，或只在属性变更时更新
复杂状态组件必须自行管理重渲染
HTML 自定义元素没有内置响应式系统。你改了 this._isOpen，但没动 shadowRoot.innerHTML 或 class，UI 就不会变——用户点折叠面板，界面毫无反应，这是最常被忽略的环节。
所谓“封装复杂交互”，本质是把状态变更 → 视图更新这条链路自己串起来。不能指望浏览器替你做 diff 或 patch。
- 每次状态变更后，必须显式调用私有渲染方法（如
this._render()），且该方法应完全基于当前状态重建结构 - 避免局部更新（比如只改某个
textContent），容易遗漏关联状态，导致视图与数据不一致 - 对高频事件（如
input、scroll），用requestIdleCallback或简单节流控制重绘频率，防止卡顿
class MyWidget extends HTMLElement 就结束，而是把每一个断点都亲手接上。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
