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

Shadow DOM 封裝的優(yōu)勢

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

命名衝突

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

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

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

基礎(chǔ)樣式和CSS 重置

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

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

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

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

讓我們來看一個直接應(yīng)用於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;
}

如果我們正在使用的組件使用了用戶代理的默認(rèn)邊距和填充值會怎樣？此重置可能會導(dǎo)致它看起來損壞，因?yàn)檫@些默認(rèn)值實(shí)際上被清除了。

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

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

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

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

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

請隨意查看。

我數(shù)了23 個自定義屬性。不用說，這遠(yuǎn)非理想。

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

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

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

那麼，我們?nèi)绾螢樽约旱慕M件設(shè)置這個呢？讓我們看看如何使用::part使Web 組件的某些元素可以進(jìn)行樣式設(shè)置。我們所做的就是在想要公開的元素上添加一個part屬性。

<div part="box"> ...</div>
<button>點(diǎn)擊我</button>

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

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

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

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