如何在自定义HTML元素中用CSS变量动态设置背景图案颜色？

问题说明 #

我制作了一个带动画效果的重复背景自定义HTML元素，希望通过主文档的CSS变量动态切换图案颜色。当前实现是将SVG模板转成data URL作为background-image，但SVG无法读取主文档的CSS变量，导致颜色无法动态更新。

问题根源 #

当SVG以data URL形式作为背景图时，它属于独立的文档上下文，无法访问主文档的CSS变量，因此SVG内部的var(--hex-color)无法获取到主文档的变量值。

解决方案 #

直接将SVG作为自定义元素的子节点插入DOM，而非转成data URL。这样SVG会继承主文档的样式环境，包括CSS变量，同时保留原有的动画效果。

修改后的代码 #

JavaScript

customElements.define(
  'svg-background',
  class extends HTMLElement {
    connectedCallback() {
      setTimeout(() => {
        // 克隆模板内容并插入自定义元素
        const templateContent = this.querySelector('template').content.cloneNode(true);
        this.appendChild(templateContent);
      });
    }
  },
);

function toggleColor(){
  document.documentElement.classList.toggle('theme-blue')
}

CSS

:root{
  --hex-color: red;
}

:root.theme-blue{
  --hex-color: blue;
}

svg-background {
  position: fixed;
  bottom: 0;
  left:0;
  width: 100vw;
  height: 800px;
  transform: translateZ(0);
  pointer-events: none;
  z-index: -1;
}

/* 设置SVG占满自定义元素，确保背景铺满 */
svg-background svg {
  width: 100%;
  height: 100%;
}

/* 从主文档继承CSS变量设置填充色 */
svg-background use {
  fill: var(--hex-color);
}

HTML

<button type="button" onclick="toggleColor()">Toggle Color</button>

<svg-background>
  <template>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90 800">
      <defs>
        <style>
          use {
            animation: 0.4s fade-in-hex;
            animation-fill-mode: both;
          }
          @keyframes fade-in-hex {
            from {opacity: 0;}
            to {opacity: 1;}
          }
          #hex-col use:nth-child(1) {animation-delay: 0.9s;}
          #hex-col use:nth-child(2) {animation-delay: 0.8s;}
          #hex-col use:nth-child(3) {animation-delay: 0.7s;}
          #hex-col use:nth-child(4) {animation-delay: 0.6s;}
          #hex-col use:nth-child(5) {animation-delay: 0.5s;}
          #hex-col use:nth-child(6) {animation-delay: 0.4s;}
          #hex-col use:nth-child(7) {animation-delay: 0.3s;}
          #hex-col use:nth-child(8) {animation-delay: 0.2s;}
          #hex-col use:nth-child(9) {animation-delay: 0.1s;}
        </style>
        <path id="hex" d="M0 25.980762113533157L15 0L45 0L60 25.980762113533157L45 51.96152422706631L15 51.96152422706631Z" />
      </defs>
      <g id="hex-col">
        <use href="#hex" transform="translate(25 25) scale(.2)" />
        <use href="#hex" transform="translate(21 115) scale(.3)" />
        <use href="#hex" transform="translate(18 205) scale(.4)" />
        <use href="#hex" transform="translate(15 295) scale(.5)" />
        <use href="#hex" transform="translate(12 385) scale(.6)" />
        <use href="#hex" transform="translate(10 475) scale(.7)" />
        <use href="#hex" transform="translate(8 565) scale(.8)" />
        <use href="#hex" transform="translate(4 655) scale(.9)" />
        <use href="#hex" transform="translate(0 750)" />
      </g>
      <use href="#hex-col" transform="translate(45 -51)" />
      <use href="#hex-col" transform="translate(-45 -51)" />
    </svg>
  </template>
</svg-background>

效果说明 #

修改后，SVG作为DOM节点直接嵌入页面，能够继承主文档的--hex-color变量。点击"Toggle Color"按钮切换根元素类名时，图案颜色会动态变化，同时原有的渐入动画效果完全保留。

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