为什么 Angular Material2 使用 ViewEncapsulation.None 而不是 Emulated 或 Native？答案

【问题标题】：Why does Angular Material2 use ViewEncapsulation.None instead of Emulated or Native?为什么 Angular Material2 使用 ViewEncapsulation.None 而不是 Emulated 或 Native？
【发布时间】：2016-11-29 17:13:51
【问题描述】：

在 Material2 项目中，每个组件都使用 ViewEncapsulation.None。（例如MdButton）

最近刚刚将md-toolbar的封装改为None。

为什么会这样？封装 CSS 的可能性难道不是使用 Angular2 创建这样一个框架的最大优势之一吗？

聚合物组件似乎使用此功能。为什么不是 Material2？

【问题讨论】：

标签： angularjs angular angular-material2

【解决方案1】：

不久前/deep/ 和>>> 是为ViewEncapsulation.Emulated 实现的，因此应该很容易设置与ViewEncapsulation.None 相同的样式。

我能想到的唯一原因是 SASS（或它们使用的任何预处理器）不支持这些 CSS 组合器，因为它们在 Chrome 中已被弃用近一年，并且从未在其他浏览器中实现。

【讨论】：

我的目标恰恰相反：恕我直言，根本不需要 /deep/ 或 >>> 选择器。一切都可以包含在组件样式中，而不依赖于全局样式。但我想知道为什么 Material 不这样做。
我认为这是为了支持主题化和从外部自定义默认样式（应用于组件）。
Polymer 具有跨组件边界工作的 CSS 变量和 mixin。 Angular2 还没有可比的东西。
即使使用ViewEncapsulation.ShadowDom，如果您想要跨组件边界工作的效果，您仍然可以跨每个组件使用@import 'shared-theme.scss'。所以我还是看不出在Angular Material中选择ViewEncapsulation.None的意义。
经过深思熟虑，我得出了一个有意义的结论。为了用户群，Angular 可能已经允许ViewEncapsulation.None。实现者可以在他们自己的项目中提供他们自己的类，例如.mat-radio-button，以覆盖 Angular 的主题。在 Angular 的 Materials 案例中，因为他们拥有如此多的用户，他们可能选择简单地让人们选择创建自己的灾难。这个决定将要求库维护者（Ang. Mat）在他们自己的编码中更加精确。我相信他们完全有能力。