<template>本身不参与渲染和样式计算，克隆后需显式设置CSS变量或添加class才能生效；推荐用element.style.setProperty()或外部CSS规则注入变量，Web Components中可用:host实现变量隔离。
直接用 <template> 本身不能配置样式——它只是个“模具”，不参与渲染、不继承 CSS 变量、也不响应 JS 动态更新。真正起作用的是模板克隆后插入 DOM 的那个实例，以及你如何在它身上设置变量或类名。
为什么 cloneNode(true) 后样式没生效
常见现象：模板里写了 <div class="card" style="--card-bg: #f0f0f0">，但 clone 出来后 getComputedStyle(el).getPropertyValue('--card-bg') 返回空字符串。
-
<template>内容不参与样式计算，style属性在模板内是“死”的，不会被浏览器解析为有效声明 - 克隆后必须显式把变量挂到实际 DOM 节点上，比如
clone.querySelector('.card').style.setProperty('--card-bg', '#f0f0f0') - 如果模板里用了
class="card"，但外部 CSS 没定义.card { --card-bg: … }，那子元素调用var(--card-bg)就是无效值
动态注入 CSS 变量的两种可靠方式
别依赖模板内部写 style，克隆后立即补变量才是可控做法。
- 方式一：用
element.style.setProperty()直接设变量，适用于单个实例或少量更新const card = clone.querySelector('.card'); card.style.setProperty('--card-bg', '#fff'); card.style.setProperty('--card-border', '#e0e0e0'); - 方式二：给克隆节点加 class，再靠外部 CSS 规则批量定义变量（适合统一主题）
card.classList.add('theme-light');
对应 CSS：.theme-light { --card-bg: #fff; --card-text: #333; }
配合 Web Components 实现真隔离
如果你需要多个相同组件各自独立配色，又不想手动 setProperty，customElement + :host 是最干净的解法。
立即学习“前端免费学习笔记（深入）”；
- 在自定义元素内部用
:host { --card-bg: #f8f9fa; }，变量天然只作用于该实例及其 shadow 内后代 - JS 中通过
this.setAttribute('bg-color', '#222')触发属性监听，再更新:host的变量值 - 避免和全局
:root变量冲突——比如不要用--bg，而用--user-card-bg这种带命名空间的名
最容易被忽略的是：CSS 变量必须沿继承链逐层传递，<template> 不是父节点，它不参与继承。所有变量都得落在最终插入 DOM 的那个元素上，而不是模板里写着就完事了。
