在之前的文章中，我们介绍了 Web Components 技术中的 Custom Elements，并且深入了解了其基本概念和实现方法。如果你还没有看过该篇文章，请先移步这里：Custom Elements（一）——基本概念和实现方法。
本篇文章将为你提供一个指南，帮助你快速上手使用 Custom Elements，并学习如何创建属于自己的 Web 组件。
前置知识
在阅读本篇文章之前，我们建议你掌握以下的知识：
- HTML、CSS 和 JavaScript 基础；
- Web Components 的基本概念和实现方法；
- ES6+ 语法。
准备工作
在上手 Custom Elements 之前，我们需要完成一些准备工作。
安装 Chrome 浏览器
Chrome 浏览器是目前支持 Web Components 的浏览器中最完美的，因此我们建议使用 Chrome 浏览器进行开发。
如果你还没有安装 Chrome 浏览器，可以从 Google 官网 下载并安装。
安装 Visual Studio Code
Visual Studio Code 是一个免费、开源的代码编辑器，它内置了对 Web 开发的支持，并提供了便捷的插件和功能。
如果你还没有安装 Visual Studio Code，可以从 官网 下载并安装。
安装 Node.js 和 npm
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，它允许我们使用 JavaScript 编写后端代码，并且可以使用 npm 管理我们的 JavaScript 代码库。
如果你还没有安装 Node.js 和 npm，可以从 官网 下载并安装。
安装 http-server
http-server 是一个简单、零配置的命令行 HTTP 服务器，它可以在任何目录下启动一个静态资源服务器。
我们可以使用 npm 安装 http-server，具体操作如下：
- 打开终端（Mac 和 Linux）或命令提示符（Windows）；
- 输入以下命令并回车：
npm install http-server -g
- 等待安装完成。
现在我们已经准备好了必要的软件和工具，让我们开始创建属于自己的 Custom Elements 吧。
创建 Custom Elements
在本篇文章中，我们将创建一个名为 my-element 的 Custom Elements，实现以下功能：
- 在页面中显示一段文本，文本内容可以在组件内定义；
- 点击元素时，在控制台中打印一条信息。
接下来，让我们一步步创建这个 Custom Elements。
安装 Polymer CLI
Polymer CLI 是一个命令行工具，它可以帮助我们创建 Custom Elements，并提供丰富的模板和工具链。
我们可以使用 npm 安装 Polymer CLI，具体操作如下：
- 打开终端（Mac 和 Linux）或命令提示符（Windows）；
- 输入以下命令并回车：
npm install polymer-cli -g
- 等待安装完成。
创建项目
在开始创建 Custom Elements 之前，我们需要创建一个新的项目。
- 新建一个空文件夹，并进入该文件夹；
- 打开终端（Mac 和 Linux）或命令提示符（Windows）；
- 输入以下命令并回车：
polymer init starter-kit --name my-element
其中，my-element 是你的项目名称。
- 根据提示输入相应信息，等待项目创建完成。
添加 Custom Elements
接下来，我们需要在项目中添加 Custom Elements。
- 进入项目目录，打开
src文件夹； - 创建一个新的文件夹，命名为
my-element； - 在
my-element文件夹中，创建一个名为my-element.html的文件，并输入以下内容：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ------------------------- ------- ------ ---------- ------- -- ---- -- -------- ----- ---- ---- --- ------ ----------- ------- -------展开代码
在上述代码中，<template> 元素用于定义 Custom Elements 的模板，<style> 元素用于定义 Custom Elements 的样式，<div> 元素用于定义 Custom Elements 的内容。
- 在
my-element.html中，添加以下代码：
-- -------------------- ---- ------- ----- --------- ------- ----------- - ------------- - -------- -- ----- - ------------------- - -- ----- --- - ---------------------- - -- ------ - ------ --- -------------------- - ------ --- - ------------------------------ --------- --------- - -- ---------- - - ------------------------------------------ -----------展开代码
在上述代码中，我们定义了一个继承自 HTMLElement 的类 MyElement，并在 window.customElements 中注册了这个类，将其命名为 my-element。
注意：在 Custom Elements 标准中，自定义元素名称必须包含连字符（如
my-element），并且不能使用 HTML、SVG 或 MathML 标准元素的名称。
- 在
<div>元素中，添加以下代码：
<p>Hello, World!</p>
这是我们将在组件中显示的文本。
- 在
connectedCallback方法中，添加以下代码：
connectedCallback() { this.addEventListener('click', () => { console.log('Clicked!'); }); }
在这段代码中，我们为 Custom Elements 添加了一个点击事件，并在事件发生时在控制台中打印了一条信息。
- 在
<style>元素中，添加以下样式：
-- -------------------- ---- ------- ----- - -------- ------ ------ ----- - - - ---------- ----- ----------- ------- ------- -------- -展开代码
在上述样式中，:host 伪类可以用于选择 Custom Elements 自身，p 元素是我们要样式化的元素。
现在，我们已经创建好了 Custom Elements，在控制台中执行 polymer serve 命令，打开浏览器并输入 http://localhost:8080/，即可看到我们刚刚创建的 Custom Elements。
总结
在本篇文章中，我们详细介绍了 Custom Elements 的创建和使用方法，并且实现了一个简单的 Custom Elements，给出了一个指南帮助你快速上手 Custom Elements 的开发。
虽然 Custom Elements 看起来很复杂，但在使用它们之后，你会发现它们实际上非常简单、灵活，可以满足我们开发 Web 组件的多种需求。
注意：由于 Custom Elements 还处于标准化阶段，因此在不同的浏览器中可能存在差异。在开发 Custom Elements 时，请先查看目标浏览器的支持情况，以确保你的代码可以正确运行在目标浏览器上。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64fe87ec95b1f8cacdd4a37e
