通过Lit和Shoelace了解Web Components的优缺点

如果您在更大的 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 将标签注册为自定义元素：

arduino 复制代码

customElements.define('rating-element', RatingElement);

有一个 render 方法，它基本上构建了基本元素：

javascript 复制代码

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

让我们上一层楼，使用一些 Shoelace。现在我们获得了构建组件。

我们将安装一个使用 rollup bundler 的 Shoelace 模板并从那里开始。 bundler 有助于解析组件，而无需从 Web 延迟加载它们。这使我们更接近标准的开发人员工作流程。

首先，我克隆 rollup 示例模板。这将拥有我们需要的正确 npm 包：

然后我们安装软件包。您可能还需要执行 npm update。

最后，运行项目：

并在不同的 shell 选项卡上启动页面：

这是您应该看到的：

那么我们是如何让这些组件显示出来的呢？

首先，我们在 index.js 中声明要在包中加载哪些组件：

javascript 复制代码

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 变得非常精简：

xml 复制代码

<!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 更改为：

ini 复制代码

<html class="sl-theme-dark">

并且因为我们已经在 index.js 中导入了深色主题：

最后是一点交互性（不要忘记在更大的更改之间刷新缓存）。

让我们向按钮添加一个 toast 风格的警报（一个进入角落的警报），并在关闭之前为 toast 添加一个持续时间倒计时。

我们将警报组件包含在 index.js 中：

javascript 复制代码

...
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 中，替换按钮代码：

ini 复制代码

<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 中的一些控制代码，在结束之前：

ini 复制代码

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 组件库的可能优势。