在 Angular 中，元件的 CSS 樣式被封裝進了自己的檢視中，而不會影響到應用程式的其它部分。

透過在元件的後設資料上設定檢視封裝模式，你可以分別控制每個元件的封裝模式。 可選的封裝模式一共有如下幾種：

* ShadowDom 模式：使用瀏覽器原生的 Shadow DOM 實現，可以參閱 MDN 上的 Shadow DOM [文件](https://developer.mozilla.org/en-US/docs/Web/Web_Components/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），這為封裝提供了便利：

![](https://img-blog.csdnimg.cn/img_convert/34c06d4bb8fc2f7dbbec62cf71e66a93.png)

注意，不管從哪個方面來看，Shadow DOM 都不是一個新事物——在過去的很長一段時間裡，瀏覽器用它來封裝一些元素的內部結構。以一個有著預設播放控制按鈕的 <video> 元素為例。你所能看到的只是一個 <video> 標籤，實際上，在它的 Shadow DOM 中，包含來一系列的按鈕和其他控制器。Shadow DOM 標準允許你為你自己的元素（custom element）維護一組 Shadow DOM。

那麼，SAP Spartacus 使用了本文目前為止提到的這些 Shadow DOM 機制了嗎？

先了解 SAP Spartacus CSS 的設計[原理](https://sap.github.io/spartacus-docs/css-architecture/#component-styles)。

Spartacus 作為一組標準元件提供，這些元件分佈在 npm 庫中。 這些庫有助於確保 Spartacus 同時保持可擴充套件性和可升級性。

為了提供儘可能多的樣式靈活性，所有 CSS 規則都在單獨的 @spartacus/styles 庫中提供。 這使得樣式完全可選、可配置和可擴充套件。 您可以擴充套件或替換標準樣式，也可以實現您自己的樣式規則。

此外，現有的 UI 框架（例如 Bootstrap）可以在 Spartacus 中使用，而不會使其成為硬編碼依賴項。

# SAP Spartacus Style 版本機制

Spartacus 庫支援語義版本控制，這意味著在主要版本的生命週期中不允許進行重大更改。對於樣式庫也是如此。會導致 UI 體驗差異的新樣式規則或調整後的規則被視為重大更改。Spartacus 庫的釋出假設客戶依賴於語義版本控制方案，因此在主要版本的生命週期中不會進行重大更改，例如對樣式庫的隱式更改。

同時，Spartacus 很可能會從一個小版本進化到下一個。為允許樣式層中的逐漸更改，為特定版本新增了新的或調整後的樣式規則，但除非您明確選擇接收這些更改，否則這些更改不會新增到樣式構建過程中。您需要設定一個變數以利用最新的突破性樣式更改。請注意，無論如何都會新增非破壞性更改。

以下示例說明了 2.2 版的附加樣式：

```css
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 變數的一個例子：

```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 中。

以下是使用佔位符選擇器的元件樣式示例：

```css
%cx-link {
  a {
    display: inline;
    padding: 0;
    margin: 0;
    color: currentColor;
    display: block;
  }
}
```

雖然可以安全地匯入佔位符選擇器，但只有明確使用它才會影響最終的 CSS。

這些佔位符選擇器，只有被真正的擴充套件時，才會出現在最後的 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

全域性主題和元件樣式對於在頁面上呈現元件最重要。 但是，在頁面上編排元件的整體佈局是另一個重要的樣式層。 有關此圖層的更多資訊，請參閱[頁面佈局](https://sap.github.io/spartacus-docs/page-layout/)。</video></video>

SAP Spartacus 的 CSS 架構

相關文章