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

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

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

命名沖突

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

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

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

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

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

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

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

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

讓我們來看一個(gè)直接應(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)邊距和填充值會(huì)怎樣？此重置可能會(huì)導(dǎo)致它看起來損壞，因?yàn)檫@些默認(rèn)值實(shí)際上被清除了。

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

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

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

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

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

請(qǐng)隨意查看。

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

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

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

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

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

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

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

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

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

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