为 React 构建 Web 组件

尽管 Web 组件是在 2011 年引入的，但它们并不是普通开发人员编写 UI 布局的首选或第二选择，尽管该技术提供了什么。

这部分是由于多年来JavaScript框架，组件驱动开发爱好者和其他深奥因素的增加。

现在，Shoelace 出现了，这是一个基于 Web 组件技术构建的 UI 库，它提供与任何 JavaScript 框架相同的体验，但具有更好的优势。

在本文中，我们将介绍 Shoelace，如何在Windows10上彻底卸载ie浏览器？详细图文卸载步骤查看其内部功能，并演示如何将其组件与 React 一起使用来构建一个简单的界面。

先决条件

若要按照本教程进行操作，需要以下各项：

• React 的工作知识

• 最新版本的 Node.js 已安装在您的计算机上

什么是Shoelace？

Shoelace 是一个开源的、与框架无关的组件，用于构建可访问的 Web 应用程序。

与导出用户界面组件和特定于特定框架的元素的传统 UI 库不同，Shoelace 提供了一系列高度可定制的 UI 组件，这些组件基于与框架无关的技术（称为 Web 组件）构建。

什么是网络组件？

Web 组件是标准 Web 技术的组合，如何使用Canopus Procoder对MPEG视频进行编码？图文教程分享允许您创建可重用的自定义元素或组件，这些元素或组件封装功能和样式，远离其余代码。

Web 组件规范由三种技术组成：

• 自定义元素：这些是具有自定义标记名称和行为的 HTML 元素，由一组 JavaScript API 指定，可以在应用程序中的任何位置使用

• Shadow Dom：这是一组JavaScript API，将作用域DOM树附加到元素。它隔离了自定义元素的功能和样式，以避免与文档的其他部分发生冲突

• HTML 模板：这些是 HTML 元素（ 和 ），使您能够创建在调用之前不会呈现的标记模板<template>``<slot>

这些技术一起使用以创建具有封装功能的 Web 组件。

查看文档以了解有关 Web 组件规范的更多信息。

使用Shoelace的好处

Angular、React 和 Vue.js 等前端框架建立在使用组件驱动开发的概念之上，以创建组件的有组织的 UI，将内容、功能和样式封装到单个 JavaScript 文件中。

虽然这确实减轻了 Web 开发中存在的复杂约束，但它确实有一些缺点：

• 组件是特定于框架的，这意味着它们只能在为其设计的框架中使用

• 开发人员必须学习如何使用组件设计的框架

• 组件的寿命受框架寿命的限制

• 开发人员在切换到另一个框架时必须重新构建基础组件

Web 组件旨在解决这些问题。

Shoelace建立在Web组件技术之上。趣知笔记它导出每个现代浏览器都支持的HTML和DOM标准组件，并跨不同的框架工作。

使用Shoelace有很多好处;以下是一些：

• 完全可定制的组件，以匹配现有设计

• 能够使用共享相同 UI 组件的不同框架构建多个应用程序

• 能够在不重建基础组件的情况下切换框架

• 持续的浏览器支持

Shoelace入门

安装Shoelace就像向项目文档添加标签一样简单。趣知笔记网站地图但是，并非每个框架都提供对 Web 组件的内置支持。<script></script>

例如，React 渲染树不能正确传播 Web 组件发出的事件。为了解决这个问题，Shoelace 创建了包装器，让我们在 React 中使用 Web 组件。

有三种官方方法可以将Shoelace集成到项目中：

• CDN：这是将Shoelace集成到您的项目中的最简单方法;它需要向文档添加 CDN 脚本和样式链接

• 本地安装：此方法允许您使用 Node.js 包管理器在本地安装Shoelace

• 挑选：通过 CDN 或本地安装 Shoelace 将在您的项目中产生完整的库大小，从而减少应用程序的加载时间。相反，Shoelace允许您挑选并仅安装您实际需要的组件

安装

在本文中，我们将使用 React 来演示 Shoelace 的使用。由于 Shoelace 使用 React 的包装器，我们只能使用 npm 在本地安装库。

出于本演示的目的，我假设您已经设置了一个 React 项目。现在，继续使用以下命令安装Shoelace：

npm install @shoelace-style/shoelace

安装 Shoelace 后，您可以通过将组件导入组件来开始使用其组件，如下所示：

import { SlInput } from "@shoelace-style/shoelace/dist/react";
function App() {
  return (
    <div className="App ">
      <SlInput value={"David"} label="Name" />
    </div>
  );
}
​
export default App;

如您所见，Shoelace 组件是作为 React 组件导入的，而不是实际的自定义元素。这是 React 独有的;上述代码中的组件将作为自定义元素导入其他框架，如 Vue、Svelte 或 Angular。<SlButton>``<sl-button>

上面的代码将向浏览器呈现一个准系统输入元素，但没有默认样式：

主题选择

Shoelace组件旨在与您的项目可能具有的不同主题系统高度兼容。您可以在浅色或深色主题之间进行选择，也可以创建开箱即用的自定义主题。

添加到项目的主题将决定组件的默认样式。例如，假设通过将样式表链接到项目文件来将主题添加到项目中：light``App.js

import "./App.css";
import { SlInput } from "@shoelace-style/shoelace/dist/react";
​
//light theme stylesheet
import "@shoelace-style/shoelace/dist/themes/light.css";
​
function App() {
  return (
    <div className="App">
      <SlInput value={"David"} label="Name" />
    </div>
  );
}
​
export default App;

输入组件将使用默认样式（在本例中由主题确定）进行渲染，如下所示：light

如果改为添加主题，则组件将使用与该主题相对应的默认样式进行渲染：dark

与主题不同，要使用主题，您必须在将样式表导入项目后激活它。您可以通过在文件内的父级上添加 来执行此操作，如下所示：lightdarksl-theme-darkclassNamediv``App.js

//dark theme stylesheet
import "@shoelace-style/shoelace/dist/themes/dark.css";
​
function App() {
​
  return (
    <div className="App sl-theme-dark">
      <SlInput value={"hello"} />
    </div>
  );
}
​
export default App;

到目前为止，您应该对 Shoelace 的工作原理以及如何将其集成到 React 项目中有一个基本的了解。

接下来，让我们创建一个组合，以便更好地了解Shoelace组件的内部功能。

在 React 中使用 Web 组件

Shoelace 提供了您在许多其他框架库中找不到的独特组件。诸如和真正推动了库可能的想法。image composer``split panel

对于我们的示例项目，我们将构建一个带有按钮和齿轮图标的卡片组件，该图标在单击时触发事件。

如果要按照示例项目进行操作，请在该文件夹中创建一个文件夹并添加一个文件：componentssrccard.jsx

接下来，将组件导入文件并将其添加到以下部分：cardApp.jsreturn

//App.jsx
import { useState } from "react";
import "./App.css";
import Example from "./components/example";
​
function App() {
  return (
    <div className="App">
      <Example />
    </div>
  );
}
​
export default App;

现在，您需要将用于整个教程的所有组件导入到文件中：card.jsx

//example.js
import {
  SlButton,
  SlCard,
  SlDrawer,
  SlIconButton,
  SlDialog,
  SlSwitch,
} from "@shoelace-style/shoelace/dist/react";

完成这些之后，是时候开始撰写卡片了！

在组件的主体中，声明组件并将以下代码嵌套在其中：<Slcard>

<SlCard style={
  
  { maxWidth: "300px" }} >
<img
  src="https://images.unsplash.com/photo-1667120651808-34305af680d3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1736&q=80"
  alt="A squirrel sits on a wood."
  slot="image"
/>
<strong>Squirrel</strong>
<br />
<p>Squirrels are members of the family Sciuridae, a family that includes…</p>
<br />
<small>6 weeks old</small>
<div slot="footer"
 style={
  
  {
    display: "flex",
    alignItems: "center",
    justifyContent: "space-between",
 }}
>
  <SlButton variant="primary" pill>
    More Info
  </SlButton>
  <SlIconButton
    name="gear"
  ></SlIconButton>
</div>
</SlCard>

在这里，我们使用 、 和元素向卡片添加了图像、标题和描述。我们还添加了一个页脚，其中包含嵌套的Shoelace按钮和图标组件：imgstrongsmall``div

在导入和使用图标等资源之前，请务必在文件中设置 Shoelace 资源的基本路径：App.jsx

//App.jsx
import { setBasePath } from "@shoelace-style/shoelace/dist/utilities/base-path";
setBasePath(
  "https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/dist/"
);

和标记上的属性是某些 Web 组件用来接受其中内容的 Shoelace 属性。在我们的项目中，我们使用它来定义卡片组合的图像和页脚部分。slotimgdiv

该属性告诉组件将调用它的元素放置在何处。以 带页脚 ，例如，如果您将代码放在卡片组件的顶部，就在标签之前：slotdivslot``img

<SlCard style={
  
  { maxWidth: "300px" }}>
<div slot="footer"
   style={
  
  {
      display: "flex",
      alignItems: "center",
      justifyContent: "space-between",
   }}
  >
    <SlButton variant="primary" pill>
      More Info
    </SlButton>
    <SlIconButton
      name="gear"
    ></SlIconButton>
  </div>
  <img
    src="https://images.unsplash.com/photo-1667120651808-34305af680d3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1736&q=80"
    alt="A squirrel sits on a wood."
    slot="image"
  />
  <strong>Squirrel</strong>
  <br />
  <p>Squirrels are members of the family Sciuridae, a family that includes…</p>
  <br />
  <small>6 weeks old</small>
</SlCard>;

页脚仍将呈现在浏览器中卡片的底部。标签也是如此。div``img

访问组件文档页面，查看其他组件插槽以及如何使用它们。card

接下来，让我们看看如何使用 CSS 自定义卡片组成。

造型Shoelace腹板组件

您可能已经注意到，Shoelace组件开箱即用的样式并不是特别好，但它们有足够的样式来让您开始。

为了使 Shoelace 组件的设计与您的应用程序的设计保持一致，您必须首先了解 Shoelace 如何利用影子 DOM。

如前所述，影子 DOM 封装了自定义元素的样式和行为。因此，来自影子 DOM 外部的样式不会影响内部内容，因此您不能简单地使用 CSS 选择器定位自定义元素的内部。

使用浏览器的 devtool 查看卡片页脚中的按钮。它应该看起来像这样：More Info

在开始设置组件样式之前，我们需要了解这里发生了什么。该组件创建一个元素，其中包含三个嵌套元素，分别表示 Web 组件的每个部分：、 和 。<SlButton>buttonspanprefixlabel``suffix

第二个元素包装一个元素，该元素负责呈现在 Web 组件标记之间传递的任何内容。span``<slot>

请注意 ;这是我们按钮的影子 DOM。 它封装了自定义元素中的内容。shadow-root``button

底层元素是我们需要设置样式的内容。不过，由于仅使用常规的CSS选择器无法从外部执行此操作，因此我们将使用Shoelaces提供的方法之一来设置自定义元素的样式。button

有三种方法可以自定义Shoelace自定义元素;您可以使用组件部件、设计令牌或自定义属性。

官方文档提供了有关如何使用这些方法进行自定义的详细说明。为方便起见，我们将演示如何使用第一种方法（组件部件）自定义组件。

Shoelace组件公开一个属性，该属性允许您使用 CSS 伪选择器从阴影根外部定位自定义元素。part``::part()

如果仔细查看 devtool 中的自定义元素，则会注意到基础元素上的一个属性：<SlButton>partbutton

<button
part="base"
class="button button--primary button--medium button--standard button--pill button--has-label"
type="button"
role="button"
aria-disabled="false"
tabindex="0"
>
...
</button>;

您可以通过简单地为组件提供 a 并在 CSS 文件中向其添加选择器来定位元素上的属性：part(base)<SlButton>className``::part()

.button::part(base){
  color: black;
  background-color: green;
}

或者，您可以使用组件作为选择器，但它必须与实际的自定义元素一起使用，而不是包装器导出的 React 组件。因此，让我们使用 代替 ：sl-button``SlButton

sl-button::part(base){
  color: black;
  background-color: green;
}

此CSS代码将分别将按钮的文本和背景颜色从白色更改为黑色，将蓝色更改为绿色：

这里有一些重要的事情需要注意。由于每个组件都有一个基本部件，因此页面上的每个按钮都会选择这种样式。为了解决这个怪癖，我们可以再次使用组件方法。我们将为按钮提供一个并使用它而不是组件的名称。button``className

我们的卡片上没有太多其他风格。在这种情况下，默认样式已经足够好了，因此我们将保持原样。

接下来，让我们看一下如何将事件侦听器添加到按钮和齿轮图标。More Info

事件处理

Shoelace组件会发出事件和方法，其用法可能与您在 React 中习惯的略有不同。例如，组件有一个方法，该方法在调用时手动触发组件的弹出状态。但是，您必须使用 React 的 Hook 访问底层自定义元素才能使用此方法：dialogshowdialog``useRef

import React from "react";
import { SlDialog } from "@shoelace-style/shoelace/dist/react";

export default function Example() {
  const ref = React.useRef();
  return (
    <div>
      <SlDialog label="dialog" ref={ref}></SlDialog>
    </div>
  );
}

该组件还会发出一个事件，该事件在对话框显示时触发。在 React 中，您可以使用以下方法收听相同的事件：sl-show``onSlShow

import React from "react";
import { SlDialog } from "@shoelace-style/shoelace/dist/react";

export default function Example() {
  const aFunc = () =>{
    console.log("This function will run when the dialog component shows");
  }
  return (
    <div>
      <SlDialog label="dialog" onSlShow={aFunc}></SlDialog>
    </div>
  );
}

或者，您可以使用 React 的事件处理程序，例如 ，在 和 等组件上使用：onClickSlButton<SlIconButton>

import React from "react";
import { SlDialog } from "@shoelace-style/shoelace/dist/react";

export default function Example() {
  const [toggle, setToggle] = React.useState(false)
  return (
    <div>
      <SlDialog label="dialog" onClick={() => setToggle(true)}></SlDialog>
    </div>
  );
}

接下来，我们将添加在单击卡片上的按钮和齿轮图标组件时打开的事件处理程序和组件。onClickdrawerdialog``More Info

该组件将显示有关卡片内容的更多信息。该组件将呈现一个组件，该组件在其状态更改时禁用或启用按钮。drawerdialogswitch``More Info

我们需要做的第一件事是为文件中的每个事件创建三种不同的状态：example.jsx

 const [open, setOpen] = React.useState(false);
 const [dialog, setDialog] = React.useState(false);
  const [toggle, setToggle] = React.useState(true);

接下来，使用切换 and 状态变量值的回调函数将事件处理程序添加到页脚按钮和齿轮图标：onClickOpenDialog

<SlButton
onClick={() => setOpen(true)}
  variant="primary"
  pill
>
  More Info
</SlButton>
<SlIconButton
  name="gear"
  onClick={() => setDialog(true)}
></SlIconButton>

现在，当单击按钮时，其事件处理程序会将 and 状态的值设置为 。OpenDialogtrue

接下来，在卡片组成下方添加和组件，内容和道具如下：drawer``dialog

<SlDrawer
  label="Squirrel"
  placement="start"
  open={open}
  onSlAfterHide={() => setOpen(false)}
>
  <img
    src="https://images.unsplash.com/photo-1667120651808-34305af680d3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1736&q=80"
    alt="A squirrel sits on a wood."
   style={
  
  { width: "100%" }}
  />
  <p>
    Squirrels are members of the family Sciuridae, a family that includes
    small or medium-size rodents. The squirrel family includes tree
    squirrels, ground squirrels, and flying squirrels. Squirrels are
    indigenous to the Americas, Eurasia, and Africa, and were introduced
    by humans to Australia.
  </p>

  <SlButton
    slot="footer"
    variant="primary"
    onClick={() => setOpen(false)}
  >
    Close
  </SlButton>
</SlDrawer>
<SlDialog
  label="Dialog"
  open={dialog}
  onSlAfterHide={() => setDialog(false)}
>
  <div
    style={
  
  {
      display: "flex",
      alignItems: "center",
      justifyContent: "space-between",
    }}
  >
    <p>Enable/Disable Drawer button</p>
    <SlSwitch
      onSlChange={() => setToggle(toggle ? false : true)}
    ></SlSwitch>
  </div>
  <SlButton
    slot="footer"
    variant="primary"
    onClick={() => setDialog(false)}
  >
    Close
  </SlButton>
</SlDialog>

两个组件上的 prop 允许您传递控制其打开和关闭状态的状态变量。我们使用的是这个而不是 and 方法。openshowhide

通过将 and 状态传递给 props，我们告诉组件显示它们各自状态的值何时为真：OpenDialogopen

在两个组件的页脚内是一个组件，该组件具有将状态设置为 ，从而关闭它们。buttononClickfalse

与其他组件不同，嵌套在组件中的组件没有为其事件使用处理程序。相反，我们使用事件处理程序来设置切换状态。SlSwitchdialogonClick``onSlChange

<SlSwitch
onSlChange={() => setToggle(toggle ? false : true)}
 ></SlSwitch>

在这里，我们在为其设置新值之前检查状态的值是否为状态。toggle``true

目前，国家不会触发任何东西。我们希望它根据其当前值禁用或启用按钮。因此，我们要做的是向按钮添加一个 prop，并将状态变量作为参数传递给它：toggleMore Infodisabled``toggle

<SlButton
onClick={() => setOpen(true)}
  variant="primary"
  disabled={toggle}
  pill
  className="button"
>
  More Info
</SlButton>

就是这样！我们以最小的努力成功地创建了一个交互式卡片组合。我们可以轻松地将我们的组合转移到其他框架中，例如Svelte，Angular或Vue，这要归功于Shoelace和Web组件技术，几乎不需要调整。

结论

在本文中，我们介绍了Shoelace和 Web 组件。我们还研究了 Shoelace 如何利用 Web 组件技术来创建与框架无关的 UI 库。

本文还展示了 Shoelace 的 、、、 和组件，并演示了如何将它们一起使用来组成一个简单的界面。buttoncardinputdialogdrawer``switch