如何在Shadow DOM（Web Component）中修改CSS变量

我没法修改Shadow DOM里:host上的CSS变量--color，因为shadowRoot.querySelector(':host')返回null，拿不到对应的元素。

Shadow DOM内的样式代码如下：

<style>
    :host {
        display: block;
        --color: ${this.color};
    }
    .colored {
        color: var(--color);
    }
</style>

之前的尝试都有问题：

• 执行以下代码会失败（querySelector返回null）：

  this.shadowRoot.querySelector(':host').style.setProperty('--color', value);
  

• 以下代码能修改color属性，但不是我要的（我需要修改CSS变量）：

  this.shadowRoot.querySelector('.colored').style.setProperty('color', value); 
  

• 以下代码能实现需求，但只有当:host是首个样式表的首个规则时才生效，兼容性差：

  this.shadowRoot.styleSheets[0].rules[0].style.setProperty('--color', value);
  

完整示例代码：

<!DOCTYPE html>

<body>
    <my-element></my-element>
    <script>
        class MyElement extends HTMLElement {
            constructor() {
                super();
                this._color = "green";
                this._shadowRoot = this.attachShadow({ mode: "open" });
                this._shadowRoot.innerHTML = '';
                this._shadowRoot.appendChild(this.template().content.cloneNode(true));
            }
            template() {
                const template = document.createElement("template");
                template.innerHTML = `
<style>
    :host {display: block;
        --color: ${this.color};
    }
    .colored {
        color: var(--color);
    }
</style>
            <p>The color will change in 2 seconds: <span id="color" class="colored">${this.color}</span></p>
        `;
                return template;
            }
            get color() {
                return this._color;
            }
            set color(value) {
                this._color = value;
                this.shadowRoot.getElementById('color').innerHTML = value;
                // ▼ 👉🏻 Uncomment below. Cannot change --color variable; selector returns null
                // this.shadowRoot.querySelector(':host').setProperty('--color', value); 

                // ▼ This works but is not what I want. I need to change the variable
                 //this.shadowRoot.querySelector('.colored').style.setProperty('color', value); 

                 // ▼ This is subject to the first stylesheet and :host being first rule
                 this.shadowRoot.styleSheets[0].rules[0].style.setProperty('--color', value);
            }

        }
        customElements.define("my-element", MyElement);
        setTimeout(() => {
            document.querySelector('my-element').color = 'blue';
        }, 2000);
    </script>
</body>

</html>

可靠解决方案 #

方案1：直接在自定义元素实例上设置CSS变量

:host选择器对应的就是自定义元素本身（宿主元素），所以不需要通过Shadow DOM查询，直接在元素自身的style上设置变量即可，这会覆盖:host里定义的变量值：

set color(value) {
    this._color = value;
    this.shadowRoot.getElementById('color').innerHTML = value;
    // 直接在自定义元素本身设置CSS变量
    this.style.setProperty('--color', value);
}

同时调整:host的样式，保留初始默认值的情况下，内联样式会自动覆盖它：

:host {
    display: block;
    --color: green; /* 初始默认值 */
}

方案2：在Shadow DOM中使用根容器元素承载CSS变量

如果不想依赖宿主元素，可在Shadow DOM里添加一个根容器（比如<div class="root">），把CSS变量定义在这个容器上，这样就能通过querySelector轻松获取并修改：
修改模板代码：

template.innerHTML = `
<style>
    :host {
        display: block;
    }
    .root {
        --color: ${this.color};
    }
    .colored {
        color: var(--color);
    }
</style>
<div class="root">
    <p>The color will change in 2 seconds: <span id="color" class="colored">${this.color}</span></p>
</div>
`;

然后在setter中修改这个根容器的变量：

set color(value) {
    this._color = value;
    this.shadowRoot.getElementById('color').innerHTML = value;
    this.shadowRoot.querySelector('.root').style.setProperty('--color', value);
}

这种方式更直观，也不用担心样式表规则顺序的问题。

方案3：通过CSSStyleSheet API精准查找:host规则

如果一定要修改:host上的原有变量，可以用CSSStyleSheet的cssRules遍历查找:host规则，避免依赖规则顺序：

set color(value) {
    this._color = value;
    this.shadowRoot.getElementById('color').innerHTML = value;
    // 遍历样式表找到:host规则
    const styleSheet = this.shadowRoot.styleSheets[0];
    for (const rule of styleSheet.cssRules) {
        if (rule.selectorText === ':host') {
            rule.style.setProperty('--color', value);
            break;
        }
    }
}

这种方法比直接取rules[0]更可靠，即使样式表中规则顺序改变也能生效。

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