帶有CSS陰影零件的陰影DOM造型

Safari 13.1 引入了對CSS Shadow Parts 的支持，這意味著::part()選擇器現在已得到Chrome、Edge、Opera、Safari 和Firefox 的支持。本文將探討其用途，並首先回顧一下Shadow DOM 的封裝特性。

Shadow DOM 封裝的優勢

在giffgaff，我們擁有大量由不同人員使用多種不同方式編寫的CSS 代碼。讓我們來看看這可能帶來哪些問題。

命名衝突

CSS 中很容易出現類名衝突。一個開發者可能會創建一個名為.price的類名。另一個開發者（甚至可能是同一個人）可能會在不知情的情況下使用相同的類名。

CSS 不會提示任何錯誤。現在，任何具有此類的HTML 元素都將接收針對兩種完全不同事物的樣式。

Shadow DOM 解決了這個問題。像Emotion 和styled-components 這樣的CSS-in-JS 庫也通過生成隨機類名（如.bwzfXH ）以不同的方式解決了這個問題。這當然有助於避免衝突！但是，CSS-in-JS 並不能阻止任何人以其他方式破壞您的組件。例如……

基礎樣式和CSS 重置

可以使用HTML 元素選擇器（如<button></button>和<div>）應用樣式。這些樣式可能會破壞組件。 Shadow DOM 是唯一提供（幾乎）完全封裝的機制——您可以放心，即使在混亂的<code>!important代碼庫中，您的組件外觀也會保持一致，因為每個組件都是封裝的。

 /* 這不會影響Shadow DOM 內部的按鈕*/
button { background-color: lime !important; }

我不認為以這種方式設置元素樣式是好的做法，但它確實會發生。即使發生，這些樣式也不會影響Shadow DOM。

值得注意的是，像顏色、字體和行高這樣的可繼承樣式仍然會在Shadow DOM 中繼承。為了防止這種情況，請使用all: initial或最好在瀏覽器支持更好後使用all: revert 。

讓我們來看一個直接應用於HTML 元素的CSS 的常見示例。考慮Eric Meyer 的重置代碼：

 html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

如果我們正在使用的組件使用了用戶代理的默認邊距和填充值會怎樣？此重置可能會導致它看起來損壞，因為這些默認值實際上被清除了。

Shadow DOM 是一種避免這些問題的方法。 Shadow DOM 使我們能夠完全確信組件將按預期呈現，無論它最終位於哪個代碼庫中。同樣，沒有任何僅用於組件的代碼會無意中影響其他任何內容——所有這些都不需要採用繁瑣的類命名約定。 Shadow DOM 提供了一種無法通過其他方式實現的封裝級別。

封裝很棒，但我們也希望我們的組件具有主題性和可定制性。 ::part選擇器使這變得容易得多。

使用::part() 樣式化Shadow DOM

到目前為止，CSS 從Shadow DOM 外部修改自定義元素樣式的唯一方法是使用CSS 自定義屬性。在一個嚴格的設計系統中，你只想允許有限的更改，這可能是理想的。如果你希望你的組件更通用，它就會產生問題。你需要使用自定義屬性定義每個你想提供的用於樣式化的CSS 屬性。僅僅聽起來就覺得很繁瑣。

如果我們想根據偽類（如:hover ）以不同的方式設置組件的樣式，情況會進一步複雜化。基本上，我們最終會得到大量的自定義屬性。讓我們來看一個來自Ionic（一套開源Web 組件）的示例。看看Ionic 按鈕組件上定義的所有自定義屬性。

請隨意查看。

我數了23 個自定義屬性。不用說，這遠非理想。

這是一個使用::part()來設置元素樣式的示例。

在這個示例中，我只是更改了顏色、邊框和背景顏色屬性，但我可以使用任何我想要的屬性，而不受已定義的自定義屬性的限制。請注意，我還可以使用偽類（如:hover和:focus ）來設置部件的不同狀態的樣式。

在這個按鈕示例中，整個組件都被暴露出來進行樣式設置，但是如果你的Web 組件包含多個HTML 元素，你可以只將組件的選定部分暴露給這種樣式設置——因此得名::part 。這阻止了組件的用戶對Shadow 樹內的任何任意元素進行樣式設置。組件作者有責任公開他們明確想要公開的組件部分。組件的其他部分可以保持視覺上的一致性，或者使用自定義屬性來實現更小的可定制性。

那麼，我們如何為自己的組件設置這個呢？讓我們看看如何使用::part使Web 組件的某些元素可以進行樣式設置。我們所做的就是在想要公開的元素上添加一個part屬性。

<div part="box"> ...</div>
<button>點擊我</button>

在這個示例中， div可以使用完整的CSS 範圍進行自定義——任何CSS 屬性都可以更改。但是，按鈕是鎖定的——除了組件作者之外，任何人都無法更改其視覺效果。

與HTML 元素可以有多個類名一樣，一個元素也可以有多個part名稱：

<div part="box thing"> ...</div>

這就是我們使用::part獲得的結果：通過公開元素的“部分”，我們可以提供一些關於如何使用Web 組件的靈活性，同時在其他區域進行保護。無論是你的設計系統、組件庫還是其他任何東西，CSS Shadow Parts 正在成為主流這一事實都為我們提供了另一個令人興奮的工具。