Vue.js中scoped样式无法设置body背景的原因咨询

1. 带scoped样式不生效的原因 #

Vue的scoped样式是通过给组件内的DOM元素自动添加唯一属性（比如data-v-xxxxxx），再让样式选择器关联这个属性实现样式隔离的。比如你写的html, body选择器，最终会被编译成类似html[data-v-xxxxxx], body[data-v-xxxxxx]的形式。但html和body是页面的根元素，不属于当前组件的DOM结构，不会被添加这个唯一属性，所以样式根本匹配不到它们，自然无法生效。

2. 去掉scoped后影响全局的原因 #

去掉scoped后，这段样式就变成了全局样式，会作用于整个页面的html和body元素。而body是所有组件共享的页面根容器，所有组件都会继承这个背景样式，因此会影响到全局的组件。

内容的提问来源于stack exchange，提问作者sajad