如何用JavaScript为HTML <template>的CSS变量赋值并实现克隆实例差异化配置？

问题背景 #

我未使用任何框架，尝试通过<template>和<slot>创建HTML内容模板，实现小幅修改后复用，且希望HTML代码不污染脚本文件。现有配置及遇到的问题如下：

现有代码 #

template.html

<template id="my-template">
  <style>
    /*** 静态样式属性 ***/
    .myTemplate {
      position: relative;
      
      --radius: 30px;  /* 这里想用<slot>但无法实现 */
    }
    .myTemplate > .drawing {
      height: 100%;
    }
    .myTemplate > .text {
      font-size: 1em;

      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
    }
    .myTemplate circle {
      /* 示例：stroke-width 依赖 radius，暂时忽略radius的设置 */
      stroke-width: calc(.5 * var(--radius));
      /* 假设有更多依赖该变量的属性 */
    }
  </style>
  
  <div class="myTemplate">
    <div class="drawing">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
        <circle cx="50%" cy="50%" r="30" />
      </svg>
    </div>
    <div class="text"><slot name="text">foo</slot></div><!-- 这个slot可以正常工作 -->
  </div>
</template>

style.css

/* 可自定义修改的样式属性 */
.myTemplate {
  height: 300px;
  width: 300px;
  font-size: 100px;

  background: yellow;
}
.myTemplate circle {
  fill: #fff0;
  stroke: #e28;
}

预期使用的script.js

const templateContent = document.getElementById('my-template').content;

let clone1 = templateContent.cloneNode(true);
clone1.querySelector('slot[name=text]').textContent = 'bar';
document.body.appendChild(clone1);

let clone2 = templateContent.cloneNode(true);
clone2.querySelector('slot[name=text]').textContent = 'baz';
// clone2.querySelector('slot[name=radius]').textContent = 22; /* 无效 */
// clone2.style.setProperty('--radius', '22');  /* 也无效 */
document.body.appendChild(clone2);

核心问题 #

多个属性依赖同一个--radius变量，我希望只需设置这一个值就能同步更新所有关联属性，但无论是用<slot>还是直接操作克隆实例的style都无法实现，且每个克隆实例需要独立的参数配置。

问题原因与解决方案 #

操作错误的根源 #

1. <slot>仅能用于HTML内容的替换，无法作用于CSS代码中的变量，所以你想在<style>内用<slot>传递值的思路行不通。
2. 你直接给clone2（文档片段DocumentFragment）设置style无效，因为DocumentFragment本身不是DOM元素，没有style属性，必须找到片段内的.myTemplate元素再进行样式操作。

正确实现方案 #

1. 针对单个实例配置变量与属性

修改脚本代码，找到克隆片段内的.myTemplate元素，再设置CSS变量，同时更新SVG中circle的r属性（因为CSS变量无法控制SVG元素的属性值，只能控制样式）：

const templateContent = document.getElementById('my-template').content;

// 创建实例1
let clone1 = templateContent.cloneNode(true);
const el1 = clone1.querySelector('.myTemplate');
el1.querySelector('slot[name=text]').textContent = 'bar';
// 设置CSS变量
el1.style.setProperty('--radius', '30px');
// 更新circle的半径属性
el1.querySelector('circle').setAttribute('r', 30);
document.body.appendChild(clone1);

// 创建实例2
let clone2 = templateContent.cloneNode(true);
const el2 = clone2.querySelector('.myTemplate');
el2.querySelector('slot[name=text]').textContent = 'baz';
el2.style.setProperty('--radius', '22px');
el2.querySelector('circle').setAttribute('r', 22);
document.body.appendChild(clone2);

2. 封装函数简化重复操作

如果需要创建多个实例，可将克隆与配置逻辑封装成函数，避免重复代码：

function createMyTemplateInstance(text, radius) {
  const clone = document.getElementById('my-template').content.cloneNode(true);
  const el = clone.querySelector('.myTemplate');
  
  // 设置文本内容
  el.querySelector('slot[name=text]').textContent = text;
  // 设置CSS变量
  el.style.setProperty('--radius', `${radius}px`);
  // 更新circle半径
  el.querySelector('circle').setAttribute('r', radius);
  
  return clone;
}

// 使用函数快速创建实例
document.body.appendChild(createMyTemplateInstance('bar', 30));
document.body.appendChild(createMyTemplateInstance('baz', 22));
document.body.appendChild(createMyTemplateInstance('qux', 40));

3. 进阶：用原生自定义元素增强复用性

如果想进一步提升组件化程度，可以使用原生自定义元素（Custom Elements），将模板与逻辑封装在一起：

class MyTemplateElement extends HTMLElement {
  constructor() {
    super();
    // 引入模板内容
    const template = document.getElementById('my-template');
    const content = template.content.cloneNode(true);
    // 创建Shadow DOM隔离样式
    this.attachShadow({ mode: 'open' }).appendChild(content);
  }

  connectedCallback() {
    // 从元素属性读取配置参数
    const text = this.getAttribute('text') || 'foo';
    const radius = this.getAttribute('radius') || 30;
    
    const el = this.shadowRoot.querySelector('.myTemplate');
    el.querySelector('slot[name=text]').textContent = text;
    el.style.setProperty('--radius', `${radius}px`);
    el.querySelector('circle').setAttribute('r', radius);
  }
}

// 注册自定义元素
customElements.define('my-template-element', MyTemplateElement);

使用时直接在HTML中编写：

<my-template-element text="bar" radius="30"></my-template-element>
<my-template-element text="baz" radius="22"></my-template-element>

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