HTML组件化仅提供注册与渲染机制，样式变量依赖CSS自定义属性（如--theme-color），交互逻辑必须由JavaScript在customElements.define()定义的类中手动实现。
直接说结论：HTML组件化本身不处理样式变量或逻辑交互——它只提供注册和渲染机制；真正承载样式变量的是CSS自定义属性（--theme-color），而逻辑交互必须靠JavaScript在customElements.define()定义的类中实现。
为什么不能直接用class或style属性管理主题变量
CSS类名（如.btn-primary）是静态、离散的，无法动态响应主题切换；内联style属性优先级高但不可继承、难维护。组件需要的是可被JS读写、能向下透传、支持计算和响应式更新的变量机制。
-
--primary-color这类CSS自定义属性可声明在:root或Shadow DOM根节点，子元素通过var(--primary-color)引用，修改一次即可批量生效 - 若在Shadow DOM中使用，必须显式将变量从light DOM“注入”进来，比如通过
getComputedStyle(this).getPropertyValue('--primary-color')读取并赋值给内部元素 - 避免在
connectedCallback里反复调用getComputedStyle，建议缓存或监听attributeChangedCallback触发更新
customElements.define()注册后如何响应用户交互
注册只是让浏览器认识新标签，所有交互逻辑都得在类定义里手动绑定。没有自动事件代理，也没有内置状态响应——你得自己写addEventListener、自己维护this.state、自己触发重渲染。
- 在
constructor()里创建shadowRoot并初始化结构，但此时DOM未挂载，不能操作document或查询外部节点 - 在
connectedCallback()中绑定事件，例如this.shadowRoot.querySelector('button').addEventListener('click', () => this.handleClick()) - 不要在
disconnectedCallback()里漏掉事件解绑，否则可能引发内存泄漏；尤其注意委托到shadowRoot的事件监听器 - 如果需要响应属性变化（如
disabled），必须在observedAttributes静态 getter 中声明，并在attributeChangedCallback里处理
Shadow DOM下样式变量与JS逻辑怎么协同更新
Shadow DOM的样式隔离是双刃剑：它保护内部不被外部CSS污染，但也切断了:root变量的自然继承。变量更新和JS逻辑更新不同步，是最容易出错的地方。
立即学习“前端免费学习笔记（深入）”；
- CSS变量修改后，不会自动触发JS回调；想响应变化，只能轮询
getComputedStyle，或用MutationObserver监听style标签变化（不推荐） - 更可靠的做法是：把主题变量作为组件属性暴露，例如
<my-card theme="dark">，然后在attributeChangedCallback里同步更新shadowRoot内的style或类名 - 如果组件内部有多个子组件也需响应主题，别层层传递
--theme-color，改用Context模式——即在shadowRoot根节点设置data-theme="dark"，再用CSS选择器[data-theme="dark"] .item控制样式
最常被忽略的一点：customElements.define()之后，组件实例的this上下文完全由你控制，没有框架帮你做diff或响应式追踪。变量变了、DOM没更新，或者事件绑了两次、解绑漏了一次——这些问题不会报错，只会静默失效。动手前先想清楚数据流向和生命周期边界。
