带有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 正在成为主流这一事实都为我们提供了另一个令人兴奋的工具。