css变量需绑定租户专属容器（如[data-tenant] .app-root）声明，避免在:root全局定义导致覆盖；组件须挂载于该容器下并用中间变量解耦，js注入须指定容器节点，ssr需预置租户属性。
因为 CSS 变量是级联生效的，不是局部作用域——--tenant-primary 在 :root 里定义，所有租户页面都会继承它；一旦多个租户共用同一份 HTML 结构或未加隔离前缀，变量值就会互相覆盖、透传、错配。
变量没绑定租户作用域，:root 成了共享污染池
多租户项目常把所有变量一股脑塞进 :root，比如：
:root {
--tenant-primary: #2a5c87;
--tenant-logo: url(/logos/default.svg);
}
问题在于：这个 :root 是全局唯一的，不管当前加载的是租户 A 还是租户 B，浏览器都只认这一个。后续 JS 注入或租户 CSS 覆盖若没指定作用域，就会直接改掉整个文档的变量值。
- 租户 A 的脚本执行
document.documentElement.style.setProperty('--tenant-primary', '#2a5c87')，租户 B 的页面还没加载完，但已渲染的按钮颜色就变了 - 两个租户 CSS 文件异步加载，后加载的那个会覆盖前一个的
--tenant-primary，顺序不可控 -
getComputedStyle(document.documentElement)拿到的永远是最后写入的值，调试时根本分不清来源
data-tenant 不加选择器限定，变量照样逃逸
有人以为加个 就安全了，但如果不配合选择器使用，变量依然全局生效：
[data-tenant="abc123"] { --tenant-primary: #2a5c87; }
/* ❌ 错误：这个声明只在[data-tenant="abc123"]元素上设变量，但后代元素读取var()时仍会向上找到:root里的同名变量 */
正确做法是让变量“活在”租户专属容器内：
- 必须用
[data-tenant="abc123"] .app-root { --tenant-primary: #2a5c87; }，再让所有组件挂在这个.app-root下 - 组件内写
background-color: var(--tenant-primary);，浏览器会从当前元素向上找最近的.app-root，自然隔离 - 禁用
all: initial或all: unset重置，它们会清空变量继承链，导致var()失效
组件样式直接引用品牌变量，断掉了定制入口
写 .btn { background: var(--tenant-primary); } 看似省事，实则埋雷：
- 租户 B 想让按钮背景用渐变，就得重写整条
.btn规则，破坏原子性 - 如果某处用了
--tenant-primary控制文字色，另一处用它控制边框色，B 租户改一个就全崩 - 中间层缺失，导致无法做 fallback：
var(--btn-bg, var(--tenant-primary))才能兼顾可覆盖与降级
每个基础组件至少预留 2–3 个语义中间变量，例如：--btn-bg、--btn-text、--btn-border，默认值调用品牌变量，但不硬编码色值。
JS 注入没指定节点，setProperty 默认写到 :root
调用 element.style.setProperty('--x', 'val') 时，如果 element 是 document.documentElement，等价于改 :root —— 这是最常见的串色源头。
- 正确做法：把变量注入到租户专属容器节点，比如
document.querySelector('[data-tenant="abc123"] .app-root').style.setProperty('--tenant-primary', '#2a5c87') - SSR 场景下，服务端必须提前生成带租户属性的 HTML 根节点，否则首屏 JS 注入来不及，出现 FOUC
- 伪元素（
::before）和动画关键帧中引用变量，部分 Safari 版本不支持嵌套var()，建议构建期用 PostCSS 展开
真正隔离的关键不是“有没有变量”，而是“变量在哪声明、被谁读取、由谁控制生命周期”。租户之间没有天然边界，得靠类名前缀、data- 属性、容器节点三者联动，才能让 --tenant-primary 不变成 --tenant-panic。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
