如何在原生Web Component中访问全局CSS变量？

这不是Webpack的限制，核心原因是Shadow DOM的样式隔离机制：:root在常规DOM中指向<html>元素，但在Web Component的Shadow DOM内部，:root指向的是Shadow根节点，而非全局的<html>。如果你的全局样式仅通过组件CSS的@import引入，那--variable会被定义在Shadow根上，而非全局文档；即便全局样式已加载到文档中，Shadow DOM的隔离特性也可能导致变量无法直接被内部元素读取（除非变量是可继承的，但部分场景下会被样式隔离阻断）。

下面是几种可行的解决方法：

方法1：将全局样式加载到文档全局 #

不要仅在组件CSS中@import全局style.css，而是在项目入口JS中直接引入它，让Webpack把它打包为全局样式注入到文档<head>：

// 入口文件（如main.js）
import './style.css';

这样:root {--variable: ...}会作用于全局<html>元素，Shadow DOM内部的元素会自动继承这个全局变量，此时组件CSS中直接使用var(--variable)即可生效。

方法2：在组件:host选择器中传递全局变量 #

如果全局样式已在文档中加载，可在组件样式中通过:host选择器显式将全局变量“传递”到Shadow DOM内部：

/* 组件内部CSS */
:host {
  /* 将全局变量映射为组件内部可用的变量 */
  --component-variable: var(--variable);
}

/* 组件内部元素使用映射后的变量 */
.some-element {
  background-color: var(--component-variable);
}

方法3：通过JS手动注入全局变量到组件 #

在组件的connectedCallback生命周期中，获取全局变量的值，再设置到组件本身的样式属性上：

class MyComponent extends HTMLElement {
  connectedCallback() {
    // 获取全局:root上的变量值
    const globalVar = getComputedStyle(document.documentElement).getPropertyValue('--variable');
    // 将变量设置到组件上，供内部使用
    this.style.setProperty('--variable', globalVar.trim());
  }
}

之后组件内部的CSS或JS就能直接使用var(--variable)了。

关于JS设置样式无效的说明 #

你之前尝试的element.style.border = "2px solid var(--variable)"无效，是因为element.style仅读取元素自身inline样式中的变量，而非全局的。正确的做法是先通过getComputedStyle获取全局变量的实际值，再设置到元素样式：

const globalVar = getComputedStyle(document.documentElement).getPropertyValue('--variable');
element.style.border = `2px solid ${globalVar.trim()}`;

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