如果您在更大的 Web 实现团队中工作或领导该团队，请确保您了解 Web 组件库的可能优势。
译自 The Pros and Cons of Web Components, Via Lit and Shoelace，作者 David Eastman。
虽然开发人员喜欢使用框架库中的组件，但 web 组件 正受到越来越多的关注，因为它们可以使用 HTML 和 CSS，并减少了对 JavaScript 的需求。但它们也提供了编写自定义组件的能力，使更大的内部软件资产能够更好地控制页面上的外观和感觉。继 我们最近关于 Shoelace 的报道（即将更名为 Web Awesome）之后，我想试用一下 该库。
在深入了解 Shoelace 之前，让我们先快速了解一下它下面的一层，即名为 Lit 的 Google web 组件库。
这让我们了解了组件是如何构建的。我们只想挑选出基本的内容，因为这是 Shoelace 构建的基础。我们将查看这里游乐场中的代码。
我们想要做的就是制作一个评分按钮，它可以点赞（并变成绿色）或点踩（红色），并相应地更改评分。
您可以看到我们以模块的形式引入了 JavaScript index.js，并使用了我们自己定义的名为 rating-element 的标签。在 <style> 中定义的 span 不会影响组件，因为 Shadow DOM 的隔离性。
让我们从代码中提取有趣的部分：
您可以看到 Lit 的导入，以及扩展 LitElement 的 RatingElement 类的定义。在文件的底部，您可以看到基于 RatingElement 将标签注册为自定义元素：
customElements.define('rating-element', RatingElement);
有一个 render 方法，它基本上构建了基本元素：
render() {
return html`
<button
class="thumb_down"
@click=${() => {this.vote = 'down'}}>
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewbox="0 0 24 24" width="24"><path d="..."/></svg>
</button>
<span class="rating">${this.rating}</span>
<button
class="thumb_up"
@click=${() => {this.vote = 'up'}}>
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewbox="0 0 24 24" width="24"><path d="..."/></svg>
</button>`;
}因此，需要编写相当多的代码才能完成一些非常简单的事情，但您确实获得了自己的可重用组件。
让我们上一层楼，使用一些 Shoelace。现在我们获得了构建组件。
我们将安装一个使用 rollup bundler 的 Shoelace 模板并从那里开始。 bundler 有助于解析组件，而无需从 Web 延迟加载它们。这使我们更接近标准的开发人员工作流程。
首先，我克隆 rollup 示例模板。这将拥有我们需要的正确 npm 包：
然后我们安装软件包。您可能还需要执行 npm update。
最后，运行项目：
并在不同的 shell 选项卡上启动页面：
这是您应该看到的：
那么我们是如何让这些组件显示出来的呢？
首先，我们在 index.js 中声明要在包中加载哪些组件：
import '@shoelace-style/shoelace/dist/themes/light.css';
import '@shoelace-style/shoelace/dist/themes/dark.css';
import SlButton from '@shoelace-style/shoelace/dist/components/button/button.js';
import SlIcon from '@shoelace-style/shoelace/dist/components/icon/icon.js';
import SlInput from '@shoelace-style/shoelace/dist/components/input/input.js';
import SlRating from '@shoelace-style/shoelace/dist/components/rating/rating.js';
import { setBasePath } from '@shoelace-style/shoelace/dist/utilities/base-path.js';
// Set the base path to the folder you copied Shoelace's assets to
setBasePath('/dist/shoelace');
// <sl-button>, <sl-icon>, <sl-input>, and <sl-rating> are ready to use!%这就是 Shoelace 按钮、输入和评级组件的来源。这使得 index.html 变得非常精简：
<!doctype html>
<html>
<head>
<title>Shoelace Rollup Example</title>
<link rel="stylesheet" href="dist/bundle.css">
</head>
<body>
<h1>Shoelace Rollup Example</h1>
<sl-button type="primary">Click me</sl-button>
<br><br>
<sl-input placeholder="Enter some text" style="max-width: 300px;"></sl-input>
<br><br>
<sl-rating></sl-rating>
<script src="dist/index.js"></script>
</body>
</html>请注意，HTML 引用的 index.js 是由 rollup 展开并放置在分发目录中的那个。 想要一个黑暗的主题？只需将 index.html 更改为：
<html class="sl-theme-dark"> 并且因为我们已经在 index.js 中导入了深色主题：
最后是一点交互性（不要忘记在更大的更改之间刷新缓存）。
让我们向按钮添加一个 toast 风格的警报（一个进入角落的警报），并在关闭之前为 toast 添加一个持续时间倒计时。
我们将警报组件包含在 index.js 中：
...
import SlIcon from '@shoelace-style/shoelace/dist/components/icon/icon.js';
import SlInput from '@shoelace-style/shoelace/dist/components/input/input.js';
import SlRating from '@shoelace-style/shoelace/dist/components/rating/rating.js';
import SlAlert from '@shoelace-style/shoelace/dist/components/alert/alert.js';
...我们将组件放在 index.html 中，替换按钮代码：
<div class="alert-duration">
<sl-button variant="primary">Show Alert</sl-button>
<sl-alert variant="primary" duration="3000" countdown="rtl" closable>
<sl-icon slot="icon" name="info-circle"></sl-icon>
This alert will automatically hide itself after three seconds, unless you interact with it.
</sl-alert>
</div> 以及 index.js 中的一些控制代码，在结束之前：
const container = document.querySelector('.alert-duration');
const button = container.querySelector('sl-button');
const alert = container.querySelector('sl-alert');
button.addEventListener('click', () => alert.toast()); 结果已经相当令人印象深刻：
（您看不到的是警报底部缩小的蓝色倒计时线）
这只是使用 Shoelace 之类的库使用 Web 组件的介绍——它们最初需要一些关注，但（像框架一样）有很多丰富的内容。但是，与框架不同，这些主要使用 HTML 和 CSS。
为了让 React 用户更容易过渡，每个 Shoelace 组件都可以作为 React 组件导入。缺点是 SSR（服务器端渲染）仍然不适合 Web 组件。确实，自定义元素与组件并不完全相同；这里详细说明了这可能导致的问题。
但总的来说，如果您正在考虑在一个更大的 Web 实现团队中工作或领导该团队，请确保您了解 Web 组件库的可能优势。