角内css封装

Question

最近，我一直在探索由角组件封装的css和dom。

我使用ng-cli搭建了一个快速项目，并加载了一个组件。假设组件选择器是'app- component‘。这封装了与这个组件本身相关的所有dom和css。目前为止一切都很好。

我从之前的阅读中学到的是，组件既不允许外部CSS流进来，也不允许内部CSS溢出(这更适合web组件)。

现在，在index.html文件中，我包含了一个引导css文件，只是为了观察来自引导css的样式是否流进组件中，这让我感到惊讶。我可以使用组件中提供的引导css的所有类。

为什么会发生这种情况？本质上，外部css正在流进组件中。我理解角度中的视图封装概念，但这并不适合。

听起来有点天真，但可能是我错过了一点！

编辑

基本上，我指的是：

https://developers.google.com/web/fundamentals/getting-started/primers/shadowdom

上面写着：

作用域CSS：在阴影DOM中定义的CSS作用域为它。样式规则不会泄漏，页面样式不会流进来。

Answer 1

默认情况下，阴影DOM不以角形式使用。默认情况下，它通过“代理ids”(根据ViewEncapsulation文档 )进行仿真。

模拟 通过向Host添加一个包含代理id的属性，并对通过Native或ViewMetadata提供的样式规则进行预处理，并向所有选择器添加新的Host属性来模拟样式的作用域。 这是默认选项.

若要在受支持的浏览器上启用阴影DOM，必须使用ViewEncapsulation.Native

原生 使用呈现器的本机封装机制。 对于DOM ，这意味着使用Shadow并为组件的主机元素创建一个ShadowRoot。

例如：

import { ..., ViewEncapsulation } from '@angular/core';

@Component({
    selector: 'my-component',
    templateUrl: './my.component.html',
    styleUrls: ['./my.component.scss'],
    encapsulation: ViewEncapsulation.Native
})
export class AppComponent ...

在这个工作柱塞#1中，您将注意到，虽然在index.html (嵌入式)和style.css中都实现了全局样式，并且在父级中实现了覆盖式样式(具有更高的特异性)，但当启用ViewEncapsulation.Native时，这些样式不会溢出到子样式中。

Note：我假设您没有使用ViewEncapsulation.Native，因为在最初的问题中没有提到它。

特定的选择器(类或id)不会按预期进行(虽然更多的“通用”样式是这样)。例如，应用于font-family的body会流进child (如果孩子没有覆盖它)，因为我现在了解到torazaburo在他的回答中暗指。

工作柱塞#2

Answer 2

样式规则不会泄漏，页面样式不会流进来。

这是一个有点令人困惑的书写。它想说的是，父组件(它称为“页面”)的CSS样式不会流血。当然，普通的旧的全球CSS规则“流血”。他们很难阻止这样做，因为他们是在角的控制之外。

Answer 3

最新的原因是样式是覆盖style.css之前的app子程序。e.g

<app-selector> .mat-tab-active {
/** Your Style **/
}

当我使用封装时，它会影响整个应用程序，而不影响我只想要样式的单个组件。