Blazor中CSS自定义属性无法自动隔离，必须手动绑定作用域：在.razor.css中将--x声明挂载到带b-前缀的组件根元素选择器下，避免使用:root声明，确保编译后--x被包裹在[b-...]规则块内。
自定义属性（CSS Custom Properties）怎么隔离才不污染全局
直接在 :root 里声明 --primary-color，等于把钥匙交给了所有组件——Modal、Card、Header 全能改它。隔离不是靠命名前缀糊弄，而是靠作用域绑定和显式传递。
- 组件内用的自定义属性，必须限定在组件选择器内部声明，例如
.my-button { --bg: #007bff; }，而非:root { --bg: ... } - 避免在
@import的共享变量文件中暴露可变的--*，只放不可覆盖的常量（如--color-black: #000），动态值一律由父组件通过 style 属性或 CSS 继承注入 - 如果组件要接收外部主题色，用
inherit显式承接：.my-button { background: var(--button-bg, inherit); }，再让父容器设style="--button-bg: #28a745" - 慎用
all: revert或all: unset重置自定义属性——它们会清掉继承链上的--*，导致子组件拿不到预期值
Blazor 中 .razor.css 怎么安全使用 CSS 自定义属性
Blazor 的 CSS 隔离机制（.razor.css）默认不处理自定义属性的作用域——--size 仍为全局，哪怕写在 Counter.razor.css 里。
- 必须手动绑定作用域：在组件根元素上加属性选择器，再把自定义属性声明挂上去，例如
div[b-abc123xyz] { --size: 16px; }（实际由框架自动注入b-*，你只需确保样式写在.razor.css内且选中根元素） - 不要在
.razor.css里写:root { --x: ... }——它会逃逸出组件范围，影响整个 bundle - 若需跨子组件传递，用
::deep+ 继承组合：::deep .child { font-size: var(--size); }，但前提是父组件的--size已在带b-*属性的容器上声明并继承 - 编译后检查生成的
{ASSEMBLY NAME}.styles.css，确认--*声明是否被包裹在带[b-...]的规则块内；否则说明你写了顶层声明
Svelte/Vue scoped 样式里，var(--x) 的继承链怎么不被切断
scoped 编译会给元素加哈希类（如 svelte-abc123），但自定义属性靠的是 CSS 继承，不是选择器匹配——所以只要父元素声明了 --x，子元素即使带哈希类也能读到。
- 关键陷阱：父元素没声明
--x，或声明在非祖先节点（比如兄弟节点），那子组件var(--x)就是unset - Vue 的
<style scoped>不影响自定义属性作用域，但若父组件用<style>（非 scoped）声明--x，它就能被所有后代继承——这是优势也是风险 - Svelte 中更稳妥的做法是：在组件顶层
<div class="root">上用内联style="--x: ..."注入，再让内部元素继承，避免依赖外部上下文 - 调试时用
getComputedStyle(el).getPropertyValue('--x')直接查值，比看 DevTools 的 Computed 面板更准——后者可能显示 inherited 但没告诉你从哪来
用 contain: style 隔离自定义属性计算，靠谱吗
不靠谱。截至 2026 年 7 月，contain: style 仅在 Chrome 115+ 和 Firefox 119+ 支持，且它只隔离「自定义属性引发的级联计算」，不隔离声明本身。
立即学习“前端免费学习笔记（深入）”；
- 它真正起作用的场景极窄：当子树大量使用
var(--theme)且该--theme在祖先频繁变更时，contain: style可避免整棵子树重算样式——但声明仍全局可见 - 不能阻止其他组件修改同一个
--theme，也无法让--theme在子树内“私有化” - 滥用会导致兼容性断裂：Safari 17.4+ 虽支持
contain-intrinsic-size，但对contain: style仍无支持 - 真要隔离计算逻辑，不如用 CSS Modules 或 Shadow DOM——前者靠构建期类名哈希，后者靠原生边界
最易被忽略的一点：自定义属性的“隔离”本质是控制声明位置和继承路径，不是靠某个神奇属性一键封印。写错一行 :root，就足以让整个组件库的主题系统失效。
