CSS变量能否在Web Components的模板或自定义元素中生效？

你的问题核心是Web Components中slot分发的元素无法解析CSS变量，其他样式正常生效，替换为具体颜色值即可显示，原因是CSS变量的作用域与Web Components的样式隔离机制冲突，以下是针对性解决办法：

可能的原因及对应方案 #

1. 变量声明作用域错误 #

如果你把--bh-color-1的声明放在了Web Component的Shadow DOM模板的<style>标签内的:root中，这里的:root指向的是Shadow根节点，而非全局文档的<html>根，导致Light DOM中的slot元素（即你的<a class="bh-action">）无法访问该变量。

解决办法：

• 方案A：全局声明变量
  将变量声明移到全局CSS文件或文档的<style>标签中：

  /* 全局样式中 */
  :root { 
    --bh-color-1:#8f1010;
  }
  .bh-action {
    display: inline-block;
    text-decoration: none;
    text-align: center;
    font-weight: 600;
    color:whitesmoke;
    background-color:var(--bh-color-1);
    height:32px;
    padding: 0px 16px;
    border-radius: 16px;
    margin-top: 8px;
  }
  

  确保该全局样式能被页面加载，Light DOM中的slot元素会继承全局:root的变量。

• 方案B：在Shadow DOM的:host上声明变量
  若要在Shadow DOM内管理变量，将变量声明在:host选择器上，这样变量会通过宿主元素继承到slot元素：

  <!-- Web Component的模板 -->
  <template id="bhFeatureTemplate">
    <style>
      :host {
        --bh-color-1: #8f1010; /* 变量绑定到宿主元素，slot元素可继承 */
      }
      ::slotted(.bh-action) {
        display: inline-block;
        text-decoration: none;
        text-align: center;
        font-weight: 600;
        color: whitesmoke;
        background-color: var(--bh-color-1);
        height: 32px;
        padding: 0 16px;
        border-radius: 16px;
        margin-top: 8px;
      }
    </style>
    <slot name="header"></slot>
    <slot name="content"></slot>
    <slot name="action"></slot>
  </template>
  

  注意这里用::slotted(.bh-action)选择器来选中slot内的.bh-action元素，因为Shadow DOM的样式默认无法直接选中Light DOM的元素。

2. 未正确使用Shadow DOM样式选择器 #

如果你的.bh-action样式写在Shadow DOM的<style>中，但直接使用.bh-action选择器，它无法选中Light DOM中的slot元素，必须用::slotted()选择器，同时确保变量能被该选择器访问（按上述方案B的写法即可）。

3. 验证变量是否生效 #

可以在DevTool的元素面板中，查看<a class="bh-action">的计算样式，如果background-color显示为var(--bh-color-1, invalid)，说明变量未被正确定义，此时检查变量的声明位置和作用域即可解决。

内容的提问来源于stack exchange，提问作者Christopher Cardea