好吧..问问题，启发解决方案..橡皮鸭！
我将离开这个问题，因为我无法在其他地方找到解决方案，有人可能有同样的问题。
我没有技术上的解释（欢迎任何人详细说明），但是在全局样式表中定义用于访问webcomponents的全局变量应该在：host伪类中，而不是在：root中作为全局属性的per the documentation。
这将工作：

:host {--variable: rgba(236, 236, 233, 0.0);}

字符串
或者至少：它对我有效;）

你能详细说明一下吗？
全局CSS中的CSS变量在整个DOM中都可用，包括shadowDOM

<style>
  :root {
    --var1: red;
  }

  body {
    --var2: gold;
  }
</style>

<my-component></my-component>

<script>
  customElements.define("my-component", class extends HTMLElement {
    constructor() {
      super()
        .attachShadow({mode: "open"})
        .innerHTML = `<style>
                      :host{
                        display:block;
                        background: var(--var1);
                        color: var(--var2);
                      }
                      </style>
                      <h1>Hello Web Component World!</h1>`;
    }
  })
</script>

字符串