web components 换肤需将主题变量显式注入 shadow dom，通过 connectedcallback 或动态 style 标签同步；支持 attribute/property 控制主题切换，内部样式用 var() + fallback；配合 thememanager 统一调度并适配系统偏好。
Web Components 配合 CSS 自定义属性实现换肤，关键在于把主题变量“注入到 Shadow DOM 作用域内”，并确保父级传入的主题能穿透封装边界、被内部样式正确读取。它不像普通 React/Vue 组件那样天然共享 :root 变量，必须显式桥接。
让 CSS 变量进入 Shadow DOM
Shadow DOM 默认隔离样式，:root 定义的变量不会自动透传进来。解决办法是：在组件挂载时，把主题变量从 light DOM 手动同步进 Shadow Root 的 style 节点或根元素 style 属性。
- 推荐方式：在
connectedCallback中遍历主题对象，用this.shadowRoot.host.style.setProperty('--primary', '#4a6fa5')设置变量（适用于 host 元素需响应主题） - 更稳妥方式：动态创建
<style></style>标签注入 Shadow Root：const style = document.createElement('style'); style.textContent = `:host { --primary: ${theme.primary}; --bg: ${theme.background}; }`; this.shadowRoot.appendChild(style);` - 避免直接改
document.documentElement —— Web Components 常被复用于不同上下文，全局污染会导致冲突
用 attribute 或 property 控制主题切换
Web Components 支持通过 HTML attribute（如 <my-button theme="dark"></my-button>）或 JS property（el.theme = 'dark'）接收主题信息，再触发内部变量更新。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 监听 attribute 变化：在
static get observedAttributes()中声明['theme']，并在attributeChangedCallback里重新同步变量 - 支持 property setter：定义
set theme(value) { this._theme = value; this.#updateTheme(); }，便于框架集成（如 Vue/React 传 props） - 主题值建议为字符串标识（
'light'/'dark'），而非完整对象 —— 减少序列化开销，也利于复用预设主题表
组件内样式使用 var() 并提供 fallback
Shadow 内部 CSS 直接使用 var(--primary, #007bff)，括号里的 fallback 值很重要 —— 它既是降级保障，也是开发时的默认色。
- 按钮背景：
background-color: var(--button-bg, #007bff); - 文字颜色：
color: var(--text-primary, #1f2937); - 圆角尺寸：
border-radius: var(--radius-md, 6px); - 不推荐在 Shadow DOM 里写
:host([theme="dark"]) { --primary: #1e293b; }—— 这会让主题逻辑和样式耦合，违背“变量由外部注入”原则
配合全局主题管理器统一调度
单个组件不该自己维护主题状态。可搭配一个轻量 ThemeManager 类，负责：
- 监听
document上的自定义事件（如theme-change） - 维护当前主题名与变量映射表（
{ light: { '--primary': '#3b82f6' }, dark: { '--primary': '#6366f1' } }） - 向所有已注册的 Web Components 广播更新（
component.updateTheme(themeConfig)） - 自动适配系统偏好：
window.matchMedia('(prefers-color-scheme: dark)')触发时主动派发事件
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
