Web组件库上的一点

近期涌现了不少关于Web Components的新闻，我将它们整理在此。

我认为Web Components最棒的应用场景之一是模式库。与其像Bootstrap那样使用<div>，或像Bulma那样使用<code><div>，不如使用自定义元素，例如<code><designsystem-tabs></designsystem-tabs>。新的Shoelace库使用sl命名空间来定义其组件。它是一个完全基于Web Components的模式库，其中的标签是<sl-tab-group></sl-tab-group>元素。

这样做有什么好处呢？首先，它引入了组件模型。这意味着，如果您正在处理一个组件，它将拥有一个模板和一个与其位置相关的样式表。查看Shoelace的内部实现，您可以看到这一切都基于Stencil。

另一个好处是，组件可以使用（并且确实使用了）Shadow DOM。这提供了一种直接来自Web平台的隔离机制。对于我们这些CSS开发者来说，这意味着标签组件中标签的样式是使用.tab类完成的（哇，太酷了！），但它在该组件中是隔离的。即使使用这么通用的名称，我也不会意外地影响页面上使用该通用类的其他组件，也不会有一些外部CSS来干扰这里的内部结构。Shadow DOM就像一道安全墙，防止样式泄漏或渗入。

我还看到了FAST框架¹，它也是一组组件。它的标签被定义为<fast-tabs></fast-tabs>。这让我想到Web Components作为模式库方法的另一个优点：它感觉像是API驱动的，甚至从组件本身的名称开始，这实际上就是你在HTML中使用的。该元素上的属性可以完全自定义。新兴的标准似乎是，您甚至不必为自定义的属性添加data-前缀。因此，如果我要制作一个标签组件，它可能是<chris-tabs active-tab="lunch" variation="rounded"></chris-tabs>。

也许使用Web Components作为模式库的最大参与者是Ionic。它们的标签是<ion-tabs></ion-tabs>，您可以使用它们而无需涉及任何其他框架（尽管它们除了自己的Stencil之外，还支持Angular、React和Vue）。Ionic在Web Components方面取得了很大的进步，最近支持了Shadow Parts。以下是Brandy Carney再次解释封装的说明：

Shadow DOM有助于防止样式从组件中泄漏并意外应用于其他元素。例如，我们将.buttonclass分配给我们的<ion-button></ion-button>组件。如果Ionic Framework用户在其自己的元素之一上设置.button类，则在框架的早期版本中，它将继承Ionic按钮样式。由于<ion-button></ion-button>现在是一个Shadow Web Component，所以这个问题不再存在。

但是，由于这种封装，样式也无法渗透到Shadow组件的内部元素中。这意味着，如果Shadow组件在其shadow tree中呈现元素，用户就无法使用他们的CSS来定位内部元素。

封装是一件好事，但它确实使样式变得“更难”（故意如此）。有一个重要的CSS概念需要了解：CSS自定义属性可以穿透Shadow DOM。但是，人们决定——我认为这是正确的——在一个设计系统中将每一件事都“变量化”并不是一个明智的做法。相反，他们为Shadow DOM内的每个HTML片段赋予一个部分，例如<div part="icon">，这使我们能够使用CSS“从外部访问”，例如<code>custom-component::part(icon) { }。我认为基于部分的样式钩子大部分是不错的，并且对于这样的模式库来说是一种明智的方案，但我承认它的一部分让我感到困扰。选择器的工作方式与您预期的不一样。例如，您无法有条件地选择内容。您也不能选择子元素或使用级联。换句话说，它只是一个一次性的，或者就像您用手直接穿过薄膜一样。您可以向前伸出手抓住东西或不抓住，但您什么也做不了。

说到让人生气的事情，Andrea Giammarchi对Web Components的现状有一个很好的观点：

每个开始使用的库，包括我的库，都建议我们应该导入该库来定义所谓的“可移植的自定义元素”。

Google总是建议使用LitElement。Microsoft希望您使用FASTElement。Stencil有自己的组件。hyperHTML有自己的组件。没有人只使用“原始”的Web Components。这很奇怪！我认为最糟糕的部分是，Web Components应该是一个“原生平台”的东西，这意味着我们不应该需要依赖某种特定技术才能使用它们。当我们这样做时，我们就像使用React或其他任何东西一样被锁定到它上面。

Andrea在文章中提出了一些想法，包括使用一些新的更小的库。我认为我想看到的是一个根本不使用任何库的模式库。

1. FAST在首页的连续句子中将自己称为“界面系统”，然后是“UI框架”。Shoelaces称自己为“库”，但我称之为“模式库”。我认为“设计系统”是描述这个概念最常用的术语，但通常比特定技术更广泛。FAST在代码本身中使用该术语来表示控制主题的包装器元素。我认为围绕所有这些东西的术语远未确定。