像 Angular 这样的框架如何在组件中包含 css？答案

【问题标题】：How do frameworks like angular contain css within a component?像 Angular 这样的框架如何在组件中包含 css？
【发布时间】：2016-06-29 06:06:14
【问题描述】：

更多的是一个好奇的问题，而不是解决一个实际的问题。

像 Angular 这样的框架如何在组件中包含 CSS 并防止 CSS 泄漏到整个页面？

【问题讨论】：

见blog.thoughtram.io/angular/2015/06/29/…
我不确定它是否是您正在寻找的东西，但您始终可以选择课程。例如，我想使用引导按钮，所以每个按钮都有一个class="btn btn-default"。每个没有这个的按钮，都将是一个“普通”按钮..
ShadowDOM: scotch.io/tutorials/…
@bene 我通常也这样做，但是使用这种方法，页面上其他地方的 btn-default 类的元素会受到影响。如果您自己编写所有代码，这不是什么大问题，但是如果您将其他人编写的元素/模板/角度组件结合起来，那就是一个问题。 haim 和 mondjunge 链接到 ShadowDOM，这看起来像是 angular 2 用来防止这种情况的解决方案
谢谢。这看起来像 ng-style 会做的事情，但我还没有详细阅读它.. .

标签： javascript css angular

【解决方案1】：

Angular 2 使用 ShadowDOM 概念，它允许 CSS 包含在组件中。

默认情况下，Angular 2 使用“模拟”，这意味着它模拟了 ShadowDOM 实现，因此它更有可能在较旧的浏览器上工作。它可以设置为使用本机浏览器实现（但只有在浏览器支持时才有效）。

附带说明，ShadowDOM 可以在 Angular 2 中完全关闭，并且 CSS 会如您预期的那样泄漏。

【讨论】：

【解决方案2】：

默认ViewEncapsulation.Emulated CSS 添加到<head> 用于所有组件。组件标签及其模板中的元素添加了一个独特的 CSS 类，并且样式的选择器在添加到 <head> 之前由 Angular2 重写，以仅匹配添加样式的特定组件。

如果 ViewEncapsulation.Native 用于支持原生 shadow DOM 的浏览器，样式会直接添加到组件中。如果浏览器不支持原生 shadow DOM 并且加载了 webcomponents polyfills，这与使用 ViewEncapsulation.Emulated 的 Angular2 类似

【讨论】：