到目前为止您可能已经习惯了这样的想法，我们可以在组件的样式部分设置组件的样式。当我们通过本课程进行时，我们一直在添加这些样式，并且您已经看到它如何立即影响组件，但我们还没有真正探索这里到底发生了什么或者这些风格有多深远。

为了更深入地探讨这个问题，让我们跳到app组件。注意，我们在这个组件中对东西进行了样式化，比如main标签和heter标签等等。你可以在模板中看到这些，但如果向下滚动到样式，我们也有这些用于body标签的样式以及样式选择器，它在寻找一个有app想法的元素。

但如果滚动回模板，没有body元素也没有id为app的元素，那么这些元素在哪里？如果打开资源管理器展开公共文件夹，你会看到indexhtml，这个索引html文件是在生成这个项目时由CLI为我们生成的。indexH-T文件是当应用程序第一次被浏览器加载时加载的app组件，实际上最终被挂载在这个活动中。

这是我们在app组件样式中瞄准的body标签，在这里你可以看到这是瞄准的body标签。如果跳回到app组件样式，你会看到它给body添加了一个灰色渐变背景。

如果看一下网站老Himel文档的主体确实有一个灰色渐变背景，如果在开发工具中检查一下点击body标签，可以看到它正在将线性渐变背景应用到这个元素。但正如看到的body标签是index html文件的一部分，所以它实际上不是app组件的一部分。

所以这意味着当前配置app组件的方式这些样式实际上是在这个组件之外流出来的，这些风格实际上是全球性的。目前如果组件应用中所有组件的样式会影响到其他组件或应用中其他地方的样式，这可能会变成一场大混乱。

但不用担心，这里有一个简单的解决方法，在样式标记中可以添加一个有作用域的属性。现在如果看看视线，可以看到不再有一个灰色渐变背景，因此将scope属性添加到样式标签中强制样式只影响组件本身并防止样式溢出到组件外部。

这太棒了，但是View是如何实现的？看一下头部或在这里设计的元素，它实际上是app组件的一部分。可以在app组件模板中看到header元素，在下面的开发工具中看看这个。如果展开dive，可以看到这里有heter元素，注意到它有data属性加上一个随机散列或字符串。如果回去把scoped属性从样式中移除并保存它，再看一下header元素会看到data属性不见了。

首先添加scope属性会导致View将这些数据属性添加到样式元素中，现在如果把它放回去，当在这里的时候注意下面添加的heter样式，添加了背景色宽度和边距。现在如果再看一下源文件会看到data属性又回到了头部或元素上。

如果点击这个看这里的类注意到它不只是应用于任何头部元素，它实际上只应用于具有data属性的header元，这就是视图处理作用域样式的方式，它添加这些独特的数据属性然后直接针对它们，同样的概念也适用于子组件。如果将作用域元素添加到组件中样式就不会渗透到子组件中反之亦然。

一会儿会仔细看一下，但首先多讨论一下作用域与全局样式，一般来说除了顶级应用组件之外不应该在任何组件中使用任何全局样式，这是有道理的，因为全局样式是想应用于整个应用的样式，所以把它们放在应用组件中是有道。

因此跳到机器人构建器组件当前应用程序中的另一个组件在这里添加。

现在这些样式不会影响任何东西，除了机器，然而确实有一些全局样式需要定义，app组件是添加它们的好地方，来做一下，实际上可以在同一个组件文件中同时拥有作用域样式和全局样式，在这里创建另一个样式块，然后会把这些app和body样式移出作用域样式并把它们放在全局中。

现在这将是一个伟大的地方，把其他全局样式例如：如果希望应用中所有组件中的所有按钮都有一个特定的默认样式，所有这些样式都是特定于应用组件本身的，所以它们的作用域应该和这里一样。

现在如果回到浏览器可以看到有灰色渐变背景，这是一个全局样式，还有作用域app和robotbuilder样式，酷，这是全局样式和作用域样式，一般来说在应用中应该在所有组件中使用作用域样式，除了在应用组件中使用的全局样式。

接下来看一看子组件的样式，