如何访问Web组件中的全局CSS变量

Question

我正在使用 vanilla webcomponents 并与 webpack 捆绑在一起。

在我的组件 css 中，我使用 @import 声明导入全局 css 表，例如

@import "../../style.css";

在 style.css 中我定义了变量，例如

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

从我的组件中，我可以访问全局 style.css 中的其他 css 声明，但似乎不能访问变量。例如这在组件 css 中对我不起作用：

background-color: var(--variable);

当尝试从 js 访问变量时，它似乎也不起作用

element.style.border = "2px solid var(--variable)";

这是 web 组件技术/webpack 的限制还是有其他方法来访问/定义全局 css 变量以便可以在 Web 组件内部访问？

Answer 1

好吧..提出问题，激发了解决方案..橡皮鸭！

我会留下这个问题，因为我无法在其他地方找到解决方案，并且有人可能有同样的问题。

我没有技术解释（非常欢迎任何有技术解释的人详细说明），但是定义用于在全局样式表中的 Web 组件中访问的全局变量应该位于 :host 伪类内，而不是按照文档位于 :root 中 适用于全球属性。

这会起作用：

:host {--variable: rgba(236, 236, 233, 0.0);} 或者至少：它对我有用;)

Answer 2

可以详细说明一下吗？

全局 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>