html的style属性中可直接用--xxx: value声明css变量，作用于该元素及其后代；但不能在style中使用var()引用，也不能在标签里动态注入变量值。
style 标签里不能直接设 CSS 变量值
HTML 的 <style></style> 标签是纯 CSS 容器，只接受标准 CSS 语法。你不能在 <style></style> 里写 JavaScript 表达式、模板变量或动态计算逻辑，比如 color: {{ theme.color }}; 或 @media (min-width: var(--breakpoint)) —— 浏览器会直接忽略整条规则，控制台报 Expected RBRACE。
更关键的是：<style></style> 本身不支持“运行时注入变量值”。它只是静态声明 CSS 规则的载体，所有变量（--x）必须在 CSS 规则中用 :root 或选择器显式声明，不能靠 JS 拼字符串塞进去再指望自动生效。
-
<style></style>中声明变量必须符合 CSS 语法：例如:root { --primary: #007bff; } - 不能在
<style></style>里调用var(--x)引用外部 JS 变量 —— 它不是模板引擎 - 多个
<style></style>块顺序影响层叠，但彼此不构成“作用域隔离”，所有都作用于全局文档
动态修改 CSS 变量只能靠 element.style.setProperty()
真正能“运行时”改变量的唯一可靠方式，是通过 DOM API 直接操作元素的 style 属性：
- 用
element.style.setProperty('--my-var', 'red')，而不是element.style.--my-var = 'red'（后者语法错误） - 若想全局生效，优先操作
document.documentElement（即:root对应元素） - 修改后，所有依赖
var(--my-var)的 CSS 规则会立即重计算，无需手动触发重排 - 注意：如果目标元素被
all: unset或inherit覆盖了继承链，变量值可能无法向下传递
示例：
document.documentElement.style.setProperty('--bg-color', '#222'); 配合 CSS：.card { background-color: var(--bg-color); }，即可实时变暗色背景。
想隔离？别依赖
<style></style> 标签天生不具备样式隔离能力 —— 它注入的规则对整个 document 生效，包括后续 JS 动态插入的节点。所谓“隔离”，必须靠其他机制：
- Shadow DOM：用
attachShadow({ mode: 'closed' })创建封闭根，再通过adoptedStyleSheets注入CSSStyleSheet实例（Chrome 73+ / Safari 16.4+） - CSS Modules 或 Vue
<style scoped></style>：构建时重写选择器，加唯一属性前缀，实现类名级隔离 - BEM 命名空间：人为约定前缀（如
.editor-content__paragraph），不依赖工具但需团队约束
直接往 append 新的 <style></style> 标签不可靠：部分浏览器不会触发样式重排，且无法防止变量污染全局命名空间。
为什么不能在 style 属性里写 var()？
HTML 的 style 属性（即内联样式）只解析静态键值对，不执行 CSS 函数。写 style="color: var(--text)" 会被浏览器当作非法声明丢弃，最终颜色回退到 inherit。
- 正确做法：在
<style></style>或外部 CSS 中定义规则，如.text { color: var(--text); }，再给元素加 class - 变量定义和引用必须分离：可在
style="--text: #333"中设变量，但引用必须靠外部 CSS 的var() - 检查是否生效，看 DevTools 的 “Computed” 面板里
color是否解析出具体值；若显示unset，说明上游变量没传下来或拼写错误
变量名严格区分大小写，--Text 和 --text 是两个变量；单位必须显式写出，--size: 14px ✅，--size: 14 ❌。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
