Vue和Svelte中:style绑定CSS自定义属性--xxx时必须用引号包裹键名，否则因JS语法错误（Unexpected token '-'）而失效；值为null/undefined时属性被完全移除；var(--xxx)依赖祖先元素设置，推荐在根元素或<html>/<body>上注入。
直接用 :style 绑定 --xxx 时必须加引号
Vue里容易踩的坑在Svelte里同样存在：键名不加引号，--primary-color 就会被当作 JS 变量名解析，直接报错 Unexpected token '-' 。Svelte 的 :style 是纯对象绑定，不支持驼峰或省略前缀。
-
:style="{'--bg-color': bgColor}"✅ 正确 —— 键名字符串化、保留双横线 -
:style="{--bg-color: bgColor}"❌ 报错 —— JS 语法非法 -
:style="{bgColor: bgColor}"❌ 无效 —— 渲染成bgcolor:，浏览器忽略 - 值为
null或undefined时，该自定义属性会从元素的style中完全移除（不是设为空字符串）
scoped 样式中 var(--xxx) 拿不到值？检查祖先作用域
Svelte 的 scoped 样式本身不阻止 CSS 自定义属性继承，但 var(--xxx) 能否取到值，取决于变量是否在**当前元素的任意祖先节点**上设置。常见失效场景是：父组件设置了 --color，子组件用了 var(--color)，但子组件内容通过 <slot> 注入，实际 DOM 层级可能跳过父组件根节点。
- 最稳做法：在
<html>或<body>上用:style注入全局变量（适合主题色等顶层配置） - 若仅限组件内传递，确保设置变量的元素是
var()所在元素的 DOM 祖先（哪怕只是外层<div>包裹） -
<style scoped>中写color: var(--text-color, #333);安全，回退值始终生效
用 $$props 批量透传自定义属性？不推荐
有人想把一堆 --xxx 当作 props 传给子组件，再用 $$props 收集后统一绑定到根元素。这看似方便，但问题明显：
-
$$props包含所有传入属性，无法区分哪些是真正要转为 CSS 变量的，容易污染style - Svelte 编译器无法静态分析动态 key，可能导致响应性失效或构建时警告
- 更关键的是：CSS 自定义属性本质是 DOM 层级继承机制，不是组件 props 通信，强行套用反而绕远路
- 真需要批量注入，建议用计算属性生成干净对象：
$: cssVars = { '--size': size, '--radius': radius }，再:style={cssVars}
Tailwind 动态颜色类不能插值？改用 bg-[{color}]
写 class="bg-{color}-500" 永远不会生效 —— Tailwind 构建阶段根本看不到运行时变量值。但你可以绕过工具类限制，用任意值语法直接塞 CSS 值。
立即学习“前端免费学习笔记（深入）”；
-
class="bg-[#3b82f6]"✅ 静态任意值，Tailwind 识别并生成样式 -
class="bg-[{hexColor}]"✅ Svelte 字符串插值 + Tailwind 任意值，运行时生效 -
class="text-{textClass}"❌ 不行，textClass是变量名，不是完整类名 - 注意：任意值里的表达式必须返回合法 CSS 值（如
#fff、rgb(255,0,0)），不能是red这种关键字（除非你提前映射好）
真正麻烦的不是怎么写，而是得时刻分清：哪些是构建时确定的（Tailwind 类名），哪些是运行时才有的（JS 变量、用户输入）。混用时边界一旦模糊，样式就悄无声息地失效。
