Scoped Style 组件作用域样式

Scoped Style

在 JSX 组件里写<style scoped>，CSS 会只命中当前组件生成的 DOM；现在也支持:deep()、:slotted()、:global()和 v-bind()。普通<style>仍保持全局。

v-bind colorv-bind radiusv-bind gap

当前 v-bind color：#2563eb

当前 v-bind radius1rem

live v-bind color#2563eb

颜色变化怎么看accent.value = #2563eb

1先看上面的大色块

它的背景直接写的是v-bind(accent.value)；点按钮后这里应该整块换色。

2拖 radius 看圆角

左侧大卡片、三个数字块和上方 radius 预览块都绑定了同一个 radius CSS 变量。

3最后看右侧对照

右侧同名 class 不吃 scoped 选择器；只有橙色<style> 全局样式会命中。

current component

编译器会给这些 DOM 加上同一个 data-rue-scope-* 属性，并改写选择器。

1scope id

0global leak

v-bindcss vars

子组件内容：通过 :deep() 命中:slotted target:slotted + v-bind

child component

这个组件也使用 scoped-style-panel；父组件的 scoped 选择器不会穿透到这里，但普通 <style> 会继续全局生效。

normal当前组件 DOM

普通选择器会被追加 data-rue-scope-*，只命中本组件生成的元素。

:deep()子组件内部 DOM

父组件可以显式穿透到 DeepWidget 的内部 class。

plain style普通 <style>

这个橙色内描边没有 scope 限制，会命中所有同名 class。

:global()保留全局选择器

用于少量确实需要外溢的样式，仍可读取 v-bind CSS 变量。

:global()会保留全局选择器；右侧子组件和选择器矩阵里的橙色描边来自普通 <style>，说明非 scoped 样式仍会全局命中同名 class。