在 Angular 中，组件的 CSS 样式被封装进了自己的视图中，而不会影响到应用程序的其它部分。
通过在组件的元数据上设置视图封装模式，你可以分别控制每个组件的封装模式。 可选的封装模式一共有如下几种：
- ShadowDom 模式：使用浏览器原生的 Shadow DOM 实现，可以参阅 MDN 上的 Shadow DOM 文档来为组件的宿主元素附加一个 Shadow DOM。
组件的视图被附加到这个 Shadow DOM 中，组件的样式也被包含在这个 Shadow DOM 中。
记忆方式：不进不出，没有样式能进来，组件样式出不去。)
- Emulated 模式（默认值）通过预处理（并改名）CSS 代码来模拟 Shadow DOM 的行为，以达到把 CSS 样式局限在组件视图中的目的。
只进不出，全局样式能进来，组件样式出不去。
你可以使用同样的方式来操作 Shadow DOM，就和操作常规 DOM 一样——例如添加子节点、设置属性，以及为节点添加自己的样式（例如通过 element.style 属性），或者为整个 Shadow DOM 添加样式（例如在 style 元素内添加样式）。不同的是，Shadow DOM 内部的元素始终不会影响到它外部的元素（除了 :focus-within），这为封装提供了便利：
注意，不管从哪个方面来看，Shadow DOM 都不是一个新事物——在过去的很长一段时间里，浏览器用它来封装一些元素的内部结构。以一个有着默认播放控制按钮的
那么，SAP Spartacus 使用了本文目前为止提到的这些 Shadow DOM 机制了吗？
先了解 SAP Spartacus CSS 的设计原理。
Spartacus 作为一组标准组件提供，这些组件分布在 npm 库中。 这些库有助于确保 Spartacus 同时保持可扩展性和可升级性。
为了提供尽可能多的样式灵活性，所有 CSS 规则都在单独的 @spartacus/styles 库中提供。 这使得样式完全可选、可配置和可扩展。 您可以扩展或替换标准样式，也可以实现您自己的样式规则。
此外，现有的 UI 框架（例如 Bootstrap）可以在 Spartacus 中使用，而不会使其成为硬编码依赖项。
SAP Spartacus Style 版本机制
Spartacus 库支持语义版本控制，这意味着在主要版本的生命周期中不允许进行重大更改。对于样式库也是如此。会导致 UI 体验差异的新样式规则或调整后的规则被视为重大更改。Spartacus 库的发布假设客户依赖于语义版本控制方案，因此在主要版本的生命周期中不会进行重大更改，例如对样式库的隐式更改。
同时，Spartacus 很可能会从一个小版本进化到下一个。为允许样式层中的逐渐更改，为特定版本添加了新的或调整后的样式规则，但除非您明确选择接收这些更改，否则这些更改不会添加到样式构建过程中。您需要设置一个变量以利用最新的突破性样式更改。请注意，无论如何都会添加非破坏性更改。
以下示例说明了 2.2 版的附加样式：
cx-mini-cart {
@include forVersion(2.1) {
background: blue;
}
@include forVersion(2.2) {
background: deepskyblue;
}
}
SAP Spartacus CSS 技术
Spartacus 是结合以下 CSS 技术开发的：
- SASS，用作预处理语言，就像在当今大多数 UI 框架中一样。
- CSS 自定义属性，用于全局主题。
- CSS post 处理，旨在用于填充旧浏览器所需的任何语法。
SAP Spartacus 并未使用本文之前介绍的任何一种 Shadom DOM 实现技术。Angular 的模拟封装无法使用，因为组件样式是由样式库提供的。 BEM 被认为是老式和复杂的。 此外，定义明确、细粒度的组件架构不需要 BEM 来封装样式。
全局主题
全局主题是用变量组织的，因此主题不是硬编码的。 对于变量，您可以使用两种常用方法：
- SASS 变量
- CSS 自定义属性（换句话说，CSS 变量）。
Spartacus 使用 CSS 变量进行主题化。 CSS 变量具有运行时可配置的优点。 而且，它们可以穿透shadow DOM（即web组件）。 此外，CSS 变量是继承的，并且比 SASS 变量提供更大的灵活性。
主题变量有助于 Spartacus 向客户提供的所谓“合约”。 该合约旨在保持稳定，并且应该很少更改。只有在主要版本中，Spartacus 才能引入一组新变量，但这不被视为最佳实践。
为了提供一组稳定的变量，Spartacus 中的 CSS 变量主要用于配色方案和字体定义。 这些可以被认为是一组全局主题定义。
下面是 css 变量的一个例子：
:root {
--cx-color-primary: red;
}
cx-link {
color: var(--cx-color-primary);
}
CSS 变量可以在文档的根或特定的选择器上进行定制。
Component Styles
Spartacus 包含大量可用于构建店面体验的组件。虽然商业可能是一种商品，但造型本质上是一个主观主题。不仅是颜色和字体的选择，还有组件的空间，以及背景、线条等。
无论 Spartacus 提供什么，它都不能代表您的品牌或企业形象。出于这个原因，Spartacus 具有高度的灵活性，因此您可以扩展组件样式，或者完全跳过它们。
由于 Spartacus 组件是在库中构建和分发的，因此无法使用组件样式, 因为 Component 和 style 的定义，在 Spartacus 里是分开的。这些样式将被预处理并烘焙到组件库中。这意味着 CSS 规则不是可选的，也不是很容易定制的。
取而代之的是，在样式库中可选择提供组件样式。您可以使用这些样式、扩展它们或完全跳过它们并从头开始构建 CSS 规则。样式库和组件库之间的契约是通过（唯一的）组件选择器完成的。
Placeholder Selectors
为了使样式库中提供的 CSS 规则完全可选，样式被包装在占位符选择器中。 占位符选择器是一种以百分比开头的 SASS 技术，例如 %cx-mini-cart。 占位符选择器不会添加到最终的 CSS 中。相反，它们需要显式被扩展，以最终出现在最终的 CSS 中。
以下是使用占位符选择器的组件样式示例：
%cx-link {
a {
display: inline;
padding: 0;
margin: 0;
color: currentColor;
display: block;
}
}
虽然可以安全地导入占位符选择器，但只有明确使用它才会影响最终的 CSS。
这些占位符选择器，只有被真正的扩展时，才会出现在最后的 css 里。
因此，样式可以扩展如下：
cx-link {
@extend %cx-link !optional;
a {
color: red;
}
}
!optional 的含义：
可选标志确保代码不会在构建期间中断，只要特定导入不是导入样式的一部分。
Spartacus 通过迭代配置的组件选择器来生成组件。
Skipping Specific Component Styles
组件样式是可选的，因为它们是从样式库中提取的。 因此，您可能希望完全禁用某些标准组件样式。 要禁用标准组件样式，您可以将组件选择器添加到 $skipComponentStyles 列表。 以下是演示从样式库中跳过两个标准组件的示例：
$skipComponentStyles: (cx-product-carousel, cx-searchbox);
如果您需要从头开始创建样式并且不想覆盖来自 Spartacus 样式库的特定样式规则，则跳过特定的组件样式可能会有所帮助。
Page Layout Styles
全局主题和组件样式对于在页面上呈现组件最重要。 但是，在页面上编排组件的整体布局是另一个重要的样式层。 有关此图层的更多信息，请参阅页面布局。
更多Jerry的原创文章，尽在："汪子熙":
