:host无法直接读取CSS变量因不继承父级样式且变量不透传Shadow DOM；需在:host中用inherit显式承接，slot内容继承变量需外层容器设all: inherit。
Web Components 中的 :host 为何无法直接读取 CSS 变量
因为 :host 本身不继承父级样式，而 CSS 变量（--my-color）默认不具备跨 Shadow DOM 透传能力。除非显式在 :host 或 :host-context() 中声明，否则组件内部 var(--my-color) 会 fallback 到初始值或 undefined。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在自定义元素的
:host选择器中，用inherit或initial显式承接外部变量，例如：:host { --primary-color: inherit; } - 若需响应外部主题切换，优先用
:host-context([data-theme="dark"])而非依赖 JS 监听，避免重绘延迟 - 避免在
:host内部重复定义同名变量（如--primary-color: #007bff），否则会屏蔽外部传入值
如何让 slot 内容正确继承父级 CSS 变量
默认情况下，<slot></slot> 投影的内容仍处于 Light DOM，其 CSS 变量作用域取决于插入位置，而非组件内部。但若组件内对 slot 做了样式包裹（比如加了 div 容器），就可能切断变量链。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给
<slot></slot>外层容器设置all: inherit，确保所有可继承属性（含 CSS 变量）透传：<div class="slot-wrapper" style="all: inherit"><slot></slot></div>
- 不要在
slot父容器上写死color、font-size等具体值——改用color: var(--text-color, #333)，保留变量控制权 - 若需限制变量作用范围（如仅允许
--icon-size透入），可用container-type: inline-size+@container配合，但目前兼容性有限，慎用
JS 动态修改 CSS 变量时 Shadow DOM 的更新时机问题
通过 element.style.setProperty('--color', 'red') 修改变量后，Shadow DOM 内部样式不会立即重排，尤其当变量被多个 var() 引用且涉及计算属性（如 calc(var(--size) * 2)）时，可能出现短暂错位。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 批量修改变量时，先用
getComputedStyle(host).getPropertyValue('--x')检查是否已生效，再触发后续逻辑 - 避免在
connectedCallback中直接 setProperty，应等requestIdleCallback或setTimeout(..., 0)微任务后执行，防止样式未挂载就写入 - 对动画敏感场景（如主题淡入），改用
CSS.registerProperty显式声明变量为可动画属性：CSS.registerProperty({ name: '--bg-opacity', syntax: '<number>', inherits: true, initialValue: '1' });
构建可配置 UI 组件库时必须暴露的 CSS 变量清单
不是所有变量都该开放。真正影响视觉一致性且高频定制的才值得暴露，否则会增加维护成本和用户认知负担。
推荐最小必要集合（以按钮组件为例）：
-
--button-bg：背景色（含 hover/focus 状态基础值） -
--button-border-radius：圆角，影响整体风格统一性 -
--button-font-size：字体大小，与行高联动，不宜拆开 -
--button-shadow：阴影，比单独控制box-shadow更安全（避免覆盖inset） -
--button-disabled-opacity：禁用态透明度，比直接设opacity更可控
别暴露 --button-hover-bg 这类细节变量——它应该由组件内部用 color-mix(in srgb, var(--button-bg), black 20%) 计算得出，保持逻辑收敛。
复杂点在于变量命名冲突：多个组件共用 --spacing-xs 时，必须约定全局 token 命名空间（如 --ui-spacing-xs），否则下游项目升级时极易静默覆盖。
