共计 3234 个字符，预计需要花费 9 分钟才能阅读完成。
在 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 都不是一个新事物——在过来的很长一段时间里，浏览器用它来封装一些元素的内部结构。以一个有着默认播放管制按钮的 <video> 元素为例。你所能看到的只是一个 <video> 标签，实际上，在它的 Shadow DOM 中，蕴含来一系列的按钮和其余控制器。Shadow DOM 规范容许你为你本人的元素（custom element）保护一组 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 的原创文章，尽在：” 汪子熙 ”:
