:host必须显式承接CSS变量，否则Shadow DOM内var(--x)将失效；slot内容需用all: inherit继承变量；组件内禁止重定义基础变量，应统一在:root声明并消费。
Web Components中:host必须显式承接变量
Shadow DOM 默认不继承 :root 或父元素的 CSS 变量，:host 不是“自动透传门”，而是“需要手动开门”的边界。不写 :host { --color: inherit; }，组件内部所有 var(--color) 都会 fallback 到未定义状态。
常见错误现象：getComputedStyle(this).getPropertyValue('--color') 返回空字符串；按钮背景始终是浏览器默认色，而非预期主题色。
-
:host { --primary-color: inherit; }是最轻量、最可靠的承接方式，前提是宿主元素（如<my-button>）本身带style="--primary-color: #007bff"或被父容器声明了该变量 - 避免用
:host { --primary-color: #007bff; }硬编码——这等于关闭了外部配置能力 - 若需兜底，用
:host { --primary-color: var(--primary-color, #007bff); }，但注意 Safari 15.6 以下不支持嵌套var()，回退值必须是静态值
slot内容继承变量要靠all: inherit
<slot> 投影的内容仍属 Light DOM，其变量作用域取决于插入位置，而非组件内部样式。但一旦你给 <slot> 包裹一层 <div>，又没处理继承，链就断了。
直接在 slot 容器上设 style="all: inherit" 是唯一稳定方案，它强制继承所有可继承属性（包括 CSS 变量），且兼容所有现代浏览器。
立即学习“前端免费学习笔记（深入）”；
- 不要写
.slot-wrapper { color: #333; }这类具体值——改用color: var(--text-color, #333); -
::slotted(*)无法穿透到 slot 子元素深层（比如::slotted(div p)无效），别依赖它做样式控制 - 若 slot 内容需响应主题切换，确保宿主元素或其祖先已声明对应变量，否则
all: inherit也传不下去
组件内禁止声明同名基础变量
在组件样式里写 .button { --primary-color: #1890ff; } 看似方便，实则破坏配置契约：外部传入的 --primary-color 被屏蔽，组件变成硬编码黑盒。
真正高内聚的组件，只负责消费变量，不负责定义基础 Token。所有颜色、间距、圆角等应统一在 :root 声明，带语义前缀如 --color-primary、--space-md。
- 组件内只用
background-color: var(--color-primary);，不重定义--color-primary - 局部覆盖走属性选择器，例如
button[data-variant="ghost"] { --color-bg: transparent; }，而非修改基础变量 - 命名禁用强绑定名，如
--btn-bg-hover—— 应由--color-primary-600+--state-hover组合推导
动态更新变量要注意挂载时机
在 connectedCallback 里直接调 this.style.setProperty('--color', 'red') 很可能失效：此时 Shadow DOM 样式尚未挂载完成，变量写入后无样式规则响应。
更稳妥的做法是延迟到微任务或空闲周期执行，确保样式系统已就绪。
- 用
requestIdleCallback(() => this.style.setProperty('--color', 'red'))或setTimeout(() => ..., 0) - 批量修改时，先用
getComputedStyle(this).getPropertyValue('--color')确认旧值已生效，再触发后续逻辑 - 对动画敏感场景（如主题淡入），需注册可动画变量：
CSS.registerProperty({ name: '--bg-opacity', syntax: '<number>', inherits: true, initialValue: '1' });
变量不是写进去就立刻生效的魔法开关，它是依赖 DOM 树继承链和样式计算时机的机制。漏掉 :host { --x: inherit; } 或在错误时机 setProperty，比语法写错更难排查。
