Angular 中的 css 封装

Question

我最近一直在探索 Angular 组件对 css 和 dom 的封装。

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

我从之前的阅读中了解到，组件既不允许外部 CSS 渗入，也不允许内部 CSS 渗出（这更特定于 Web 组件）

现在，在 index.html 文件中，我包含了一个 bootstrap css 文件，只是为了观察 bootstrap css 中的样式是否渗入组件中，令我惊讶的是它确实发生了。我可以使用在我的组件中提供引导 css 的所有类。

为什么会这样？本质上，外部 css 正在渗透到组件中。我了解 Angular 中的视图封装概念，但这不适合。

听起来有点天真，但可能是我在这里遗漏了一点！

编辑

基本上我指的是这个：

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

这说：

作用域 CSS：在 shadow DOM 中定义的 CSS 是作用域的。样式规则不会泄露，页面样式也不会渗入。

Answer 1

默认情况下，Angular 中不使用Shadow DOM 。默认情况下，根据ViewEncapsulation 文档，它通过“代理 ID”进行模拟。

模拟

Native通过向宿主元素添加包含代理 id 的属性并预处理通过 ViewMetadata 或 ViewMetadata 提供的样式规则，并将新的宿主元素属性添加到所有选择器来模拟样式范围。

这是默认选项。

要在支持的浏览器上启用 Shadow DOM，您必须使用 ViewEncapsulation.Native

本国的

使用渲染器的原生封装机制。

对于 DOM，这意味着使用 Shadow DOM 并为组件的宿主元素创建一个 ShadowRoot。

例如：

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

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

在这个工作Plunker＃1，你会发现，尽管全球风格已经在这两个已经实现index.html（嵌入式）及style.css和覆盖风格（具有较高的特异性）已在父实施，这些并不时渗入孩子ViewEncapsulation.Native是启用。

注意：我假设您没有使用，ViewEncapsulation.Native因为原始问题中没有提到它。

特定的选择器（类或 id）没有被保留（如预期的那样），尽管更“通用”的样式是。例如，font-family应用到body将渗入child（如果孩子没有覆盖它），因为我现在明白 torazaburo 在他的回答中暗指。

工作 Plunker #2