主题变量必须挂载在宿主元素上，不能写在 :root 或 body 里；Shadow DOM 继承链在影子边界截断，变量需通过 :host 显式声明并转发，且推荐始终带 fallback，slot 内容不继承主题变量，动态更新应使用 CSSStyleSheet.replace() 避免 FOUC。
主题变量必须挂载在宿主元素上，不能写在 :root 或 body 里
Shadow DOM 的继承链会在影子边界处截断，:root 或 body 声明的 CSS 变量根本不会流入 shadow tree。浏览器只沿 DOM 树向上查找，而宿主元素（比如 <my-button>）就是 shadow 内部能“看到”的最高节点。
常见错误是：body { --primary-color: #28a745; }，结果组件内 color: var(--primary-color); 静默回退到默认值，DevTools 里查不到报错，只显示 fallback。
-
<my-button style="--primary-color: #28a745;"></my-button>是最直接有效的写法 - 或用 CSS 规则：
my-button { --primary-color: #28a745; }，注意不是.my-button类选择器 - 批量设置时可用
document.querySelectorAll('my-button, my-card').forEach(el => el.style.setProperty('--radius', '8px'))
:host 是接收和落地主题变量的唯一合法位置
变量挂上去了，但 shadow 内部样式还读不到——因为没被显式接收。CSS 变量不会自动“穿透”进 shadow root，必须由 :host 显式声明并转发。
例如，在 shadowRoot 的 <style> 中写：
:host {
--button-bg: var(--primary-color, #007bff);
--button-padding: var(--size, 8px) var(--size, 16px);
}
button {
background: var(--button-bg);
padding: var(--button-padding);
}
这样变量才真正“活”在 shadow 内部。漏掉这一步，var(--primary-color) 就只是个未解析的字符串。
-
:host必须存在，否则变量无法被 shadow 内部引用 - 推荐始终带 fallback：
var(--primary-color, #007bff)，避免主题未设时样式崩塌 - 支持状态响应：
:host([size="large"]) { --button-padding: 12px 24px; }，无需 JS 操作 class
slot 内容不继承主题变量，需使用者自行透传
::slotted(*) 不会把 --primary-color 自动传给插槽内容（如 <p>Hello</p>），它只继承可继承属性（color、font 等），且不支持布局类变量。
如果希望 slot 内文本响应主题色，不能靠 shadow 内部样式控制，而应由外部决定：
- 使用者写：
<my-button><p style="color: var(--primary-color)">Submit</p></my-button> - 或定义透传属性：
<my-button theme="dark"></my-button>，再在组件内用:host([theme="dark"]) ::slotted(p) { color: #fff; } - 不要写
::slotted(*) { background: var(--bg-color); }—— layout 属性无效，且违背封装原则
动态更新主题时，别用 innerHTML 替换 style 标签
直接改 shadowRoot.querySelector('style').textContent 虽然能生效，但高频切换时易引发 FOUC 或闪烁，因为旧 <style> 被销毁，CSSOM 规则重置。
更健壮的做法是用 CSSStyleSheet 实例配合 replace()：
const sheet = new CSSStyleSheet();
sheet.replace('.button { background: var(--primary-color); }');
this.shadowRoot.adoptedStyleSheets = [sheet];
注意兼容性：
- Chrome/Firefox 支持
replace()，Safari 17.4+ 才稳定支持 - 若需兼容旧 Safari，仍可用
textContent，但要确保只更新内容，不重建<style>节点 - 避免用
innerHTML = '<style>...</style>'——<style>会被当普通 HTML 解析，不进 CSSOM
