Previously in this series we covered what Web Components are and some tools used to create them. Now, we will be creating a Web Component, publishing it, and use it on a web page.

在本系列之前，我们介绍了什么是Web组件以及用于创建它们的一些工具 。 现在，我们将创建一个Web组件，将其发布并在网页上使用。

What will we be making? A keypad component using Material Design Web Components. Building a Web Component made up of Web Components, pretty meta, I know.

我们会做什么？ 使用Material Design Web组件的键盘组件 。 我知道，构建一个由Web组件(漂亮的meta)组成的Web组件。

The idea is to be able to insert a keypad into a project with as little hassle as possible. With just a couple of lines of code, a user can have a way of inputting numbers into an application to make a phone call, set the temperature, select an answer to a quiz, cast a vote, and many other applications.

这样做的想法是能够将键盘插入到项目中尽可能少的麻烦。 只需几行代码，用户便可以将数字输入到应用程序中以拨打电话，设置温度，选择测验答案，进行投票以及许多其他应用程序。

Let’s list the features of the keypad component that will be built:

让我们列出将要构建的键盘组件的功能：

• The out-of-the-box Web Component will render a display and below it, buttons with digits 0–9, *, and #.开箱即用的Web组件将呈现一个显示，并在其下方显示带有数字0–9，*和＃的按钮。
• The user will be able to hide the display and the *,# buttons by setting attributes and properties.通过设置属性和属性，用户将能够隐藏显示和*，＃按钮。
• When a user clicks a button, a character will be added to a display. At the same time, a custom event will be sent so that the application outside of the component will know that a button has been pressed.当用户单击按钮时，字符将被添加到显示中。 同时，将发送一个自定义事件，以便组件外部的应用程序将知道已按下按钮。
• There will be an ‘Action’ button that will send all the digits pressed as a custom event for the greater application to process it how it sees fit. The text of the button can be set by the user through a property.将有一个“操作”按钮，该按钮将把按下的所有数字作为自定义事件发送给更大的应用程序，以对其认为合适的方式进行处理。 用户可以通过属性设置按钮的文本。
• Another button will be available to the user to ‘End’ the action. Its text will also be customizable. When pressed, the display will be cleared and yet another custom event will be sent to the application to be made aware.用户可以使用另一个按钮来“结束”操作。 其文本也将可自定义。 当按下时，显示将被清除，并且另一个自定义事件将被发送到应用程序以进行通知。
• The Web Component will have a public method made available so the application can switch to the ‘active’ state which then displays the ‘End’ button.Web组件将提供一个公共方法，因此应用程序可以切换到“活动”状态，然后显示“结束”按钮。
• To add some styling to the Web Component, the Material Design button and textfield components will be used.要向Web组件添加一些样式，将使用“材质设计”按钮和文本字段组件。

实际使用中的Web组件 (See the Web Component in Action)

Here’s a working example on CodePen

这是CodePen上的工作示例

Go ahead and enter some digits and press enter. Click ok on the alert, and then click cancel.

继续输入一些数字，然后按Enter。 单击警报上的“确定”，然后单击“取消”。

使用开放式Web组件构建组件 (Building Components With Open Web Components)

How will we build this keypad component? We will be using lit-html by way of Open Web Components (Open-WC). As stated on their website:

我们将如何构建此键盘组件？ 我们将通过开放Web组件(Open-WC)使用lit-html。 如其网站上所述 ：

The goal of Open Web Components is to empower everyone with a powerful and battle-tested setup for sharing open source web components. We try to achieve this by giving a set of recommendations and defaults on how to facilitate your web component project. Our recommendations include: developing, linting, testing, tooling, demoing, publishing and automating.

开放Web组件的目标是为每个人提供强大且经过考验的设置，以共享开放源Web组件。 我们尝试通过提供一组建议和默认值来简化Web组件项目，以实现这一目标。 我们的建议包括：开发，整理，测试，工具，演示，发布和自动化。

By starting with Open-WC, everyone on a team can have the same starting point to build web components. As with many things, consistency is a factor for success.

通过从Open-WC开始，团队中的每个人都可以具有构建Web组件的相同起点。 与许多事情一样，一致性是成功的因素。

Since Open-WC is very opinionated in how Web Components and projects are built, they have a really thorough CLI tool to generate them. Let’s set everything up.

由于Open-WC在构建Web组件和项目方面非常自以为是，因此它们具有非常全面的CLI工具来生成它们。 让我们进行所有设置。

In your terminal, navigate to where the Web Component project will live.

在您的终端中，导航到Web组件项目将驻留的位置。

Then, type npm init @open-wc. This will launch the Open-WC setup process.

然后，键入npm init @open-wc 。 这将启动Open-WC设置过程。

Here are the options I used for the project in this blog post:

这是我在此博客文章中用于项目的选项：

• What would you like to do today?: Scaffold a new project您今天想做什么？：脚手架一个新项目
• What would you like to scaffold?: Web Component您想使用什么脚手架？：Web组件
• What would you like to add?: Linting (eslint & prettier)您想添加什么？：绒毛(软装和漂亮)
• Would you like to use typescript? No您要使用打字稿吗？ 没有
• What is the tag name of your application/web component? whatever-you-like-keypad (You can name the Web Component whatever you like as long as it’s at least 2 words separated by a ‘-’)您的应用程序/ Web组件的标签名称是什么？ 随便什么键盘(您可以根据自己的喜好命名Web组件，只要它至少由2个单词组成，并用'-'分隔即可)
• Do you want to write this file structure to disk? Yes您是否要将此文件结构写入磁盘？ 是
• Do you want to install dependencies? Yes, with npm (if you prefer yarn, you can choose that)您要安装依赖项吗？ 是的，使用npm(如果您更喜欢纱线，可以选择)

To install the Material Design button and textfield. Go into the new folder created by the Open-WC setup process and type in the following:

安装“材料设计”按钮和文本字段。 进入由Open-WC设置过程创建的新文件夹，然后输入以下内容：

npm i @material/mwc-buttonnpm i @material/mwc-textfield

npm i @material/mwc-buttonnpm i @material/mwc-textfield

组件代码 (The Component Code)

The code for the Web Component can be found in this GitHub repository. Let’s go through the code in the only file in the src folder.

Web组件的代码可以在此GitHub存储库中找到。 让我们浏览src文件夹中唯一文件中的代码。

First are the imports. Open-WC recommends using lit-html and the lit-element base class to build and render the Web Component. We also import the Material Design button and textfield to use in the Web Component.

首先是进口。 Open-WC建议使用lit-html和lit-element基类来构建和呈现Web组件。 我们还导入了“材料设计”按钮和文本字段以在Web组件中使用。

We base our new Web Component on LitElement.

我们将新的Web组件基于LitElement。

Styling the Web Component

样式化Web组件

Here the attributes and properties that the Web Component accepts are set along with their Types. This way, lit-html knows how to handle the values passed in.

在此，Web组件接受的属性和属性及其类型被设置。 这样，lit-html知道如何处理传入的值。

The Web Component inherits all the “super” powers of the LitElement and defines the default values.

Web组件继承了LitElement的所有“超级”功能，并定义了默认值。

Next up are the various methods of the Web Component. Things like dispatching custom events when adding or sending digits, and ending an action. There is also the method that can be called on the Web Component that lets it know that an action has started.

接下来是Web组件的各种方法。 诸如在添加或发送数字时调度自定义事件以及结束操作之类的事情。 还可以在Web组件上调用该方法，以使其知道操作已开始。

You may have noticed that the __addDigit function, just adds the digit to the end. If a user moves the cursor to the middle of the digits, new digits will be only added at the end.

您可能已经注意到__addDigit函数只是将数字添加到末尾。 如果用户将光标移到数字的中间，新数字将仅添加在末尾。

Now, as an exercise, let’s allow new digits to be added wherever the cursor is. Here is a hint on where to start.

现在，作为练习，我们允许将新数字添加到光标所在的位置。 这是从哪里start的提示 。

The markup to render the Web Component. Depending on the state and what attributes/properties are set, the Web Component will render or hide different elements.

用于呈现Web组件的标记。 根据状态和设置的属性/属性，Web组件将呈现或隐藏不同的元素。

发布新的Web组件 (Publishing Your New Web Component)

Now that the Web Component is built, let’s publish it so we and others can use it in a project.

现在已经构建了Web组件，让我们发布它，以便我们和其他人可以在项目中使用它。

To do that, we will use a registry like npm. If you don’t have one already, sign up for an account. Here is some information. This will not only show you how to sign up for an account but also how to log into your account using your terminal so you can publish the Web Component.

为此，我们将使用npm之类的注册表。 如果您还没有，请注册一个帐户。 这是一些信息 。 这不仅会向您显示如何注册帐户，而且还将显示如何使用终端登录帐户，以便您可以发布Web组件。

Once that is set up, the Web Component will be published as a public scoped package. This will help prevent conflicts just in case there is a Web Component or package with the same name that you chose. More information about scopes can be found here.

设置完成后，Web组件将作为公共范围的程序包发布。 万一存在与您选择的名称相同的Web组件或程序包，这将有助于防止冲突。 有关范围的更多信息，请参见此处 。

In your terminal in the project directory, type (replacing your-npm-username with your npm username):

在项目目录的终端中，键入(用您的npm用户名替换your-npm-username)：

npm init --scope=@your-npm-username

npm init --scope=@your-npm-username

Accept all the default choices or change as you see fit for each step.

接受所有默认选择或根据您认为适合每个步骤的步骤进行更改。

Since your Web Component is now behind a scope, let’s modify the Readme that was generated by Open-WC to reflect that. Again replacing the placeholders (your-npm-username and whatever-you-like-keypad) with your own.

由于您的Web组件现在位于作用域之后，因此让我们修改Open-WC生成的Readme来反映这一点。 再次用您自己的占位符(您的npm用户名和任何您喜欢的键盘)代替。

The command to install will be:

安装命令将是：

npm i @your-npm-username/whatever-you-like-keypad

npm i @your-npm-username/whatever-you-like-keypad

To use it in a project, you will use the import syntax shown below:

要在项目中使用它，您将使用如下所示的import语法：

import '@your-npm-username/whatever-you-like-keypad/whatever-you-like-keypad.js';

import '@your-npm-username/whatever-you-like-keypad/whatever-you-like-keypad.js';

Save your changes.

保存您的更改。

Now, let’s publish the Web Component. Type into the terminal:

现在，让我们发布Web组件。 输入终端：

npm publish --access public

npm publish --access public

If successful, you should be able to find the Web Component on the npm website at https://www.npmjs.com/package/@your-npm-username/whatever-you-like-keypad.

如果成功，您应该可以在npm网站上找到Web组件，网址为https://www.npmjs.com/package/@your-npm-username/whatever-you-like-keypad 。

Of course, replacing your-npm-username and whatever-you-like-keypad with your values.

当然，用your-npm-username替换your-npm-username和whatever-you-like-keypad 。

Congratulations, you are published! You now have a publicly available Web Component that you and others can use in a project.

恭喜，您已发布！ 现在，您有了一个公共可用的Web组件，您和其他人都可以在项目中使用它。

使用Web组件 (Using the Web Component)

To install a copy locally, type in a project’s directory in the terminal, again replacing with your values:

要在本地安装副本，请在终端中键入项目的目录，并再次替换为您的值：

npm i @your-npm-username/whatever-you-like-keypad

npm i @your-npm-username/whatever-you-like-keypad

But what if you don’t want to install the package? Maybe you want to make sure you always load the latest version or want to see the Web Component in an environment that doesn’t allow installation, like CodePen.

但是，如果您不想安装该软件包怎么办？ 也许您想确保始终加载最新版本，或者想在不允许安装的环境(例如CodePen)中查看Web组件。

This is where a Content Delivery Network (CDN) comes in. They host your package and you can link directly to your files. For this post, we will use unpkg.com. They automatically copy over your files, so there is nothing to do on your part.

这是内容传递网络(CDN)的来源。它们托管您的软件包，您可以直接链接到文件。 对于这篇文章，我们将使用unpkg.com 。 它们会自动复制您的文件，因此您无需执行任何操作。

Here is a sample CodePen that you can use to test out your Web Component:

这是一个示例CodePen，可用于测试Web组件：

Again replacing the username and component name placeholders with your own in both the HTML and JS tabs.

在HTML和JS标签中，再次用您自己的用户名和组件名称占位符替换。

Try adding some of the attributes and properties for the Web Component we created (no-asterisk no-hash no-display) and set the values for the button’s text (actionText=”Something” cancelText=”Something else”).

尝试为我们创建的Web组件添加一些属性和属性(无星号，无散列，无显示)，并设置按钮文本的值(actionText =“ Something” cancelText =“ otherothering”)。

Note: When using no-display, to see the digits, an input or textarea HTML element will be needed. Like in this example:

注意：使用不显示时，要查看数字，将需要输入或textarea HTML元素。 像这个例子一样：

接下来是什么？ (What Next?)

Now that you have a shiny new Web Component, what else can you add to it? Maybe, add a backspace button that will delete a character or maybe allow the user to set their own buttons. Or maybe just create something brand new.

现在您有了一个闪亮的新Web组件，您还可以添加什么呢？ 也许添加一个退格按钮将删除一个字符，或者允许用户设置自己的按钮。 或者也许只是创造一些全新的东西。

Leave any links to your Web Component, questions, and/or feedback in our Community Slack Channel. I’m looking forward to seeing what you build.

将任何指向您的Web组件的链接，问题和/或反馈保留在我们的Community Slack Channel中 。 我期待看到您的构建。

Originally published at https://www.nexmo.com/blog/2020/08/13/creating-a-web-component-with-open-wc

最初发布于 https://www.nexmo.com/blog/2020/08/13/creating-a-web-component-with-open-wc