前言
在现代的 Web 开发中，为了提高可重用性和可维护性，我们经常使用自定义元素来组织我们的页面和应用程序。本文将介绍如何使用 Polymer 创建自定义元素，以及创建时常见的一些问题和解决方案。
准备工作
在开始之前，需要准备好以下工具和环境：
- 一个文本编辑器，推荐使用 VS Code。
- Node.js 和 npm 包管理器。
- Polymer CLI 工具。
可以通过 nodejs.org 官方网站下载 Node.js 和 npm，通过命令行安装 Polymer CLI 工具：
npm install -g polymer-cli
创建项目
使用 Polymer 创建自定义元素通常需要一个 Polymer 应用程序作为基础。使用 Polymer CLI 工具可以快速创建一个基本的 Polymer 应用程序：
polymer init polymer-3-element
该命令将创建一个名为 my-element 的初始化 Polymer 元素，同时自动化了一些工作，例如创建项目文件夹、配置文件和依赖项。
编写元素
接下来，我们将需要编辑刚刚创建的元素，以创建一个具有简单属性和方法的自定义元素。在创建的 my-element/my-element.js 文件中，我们添加以下代码：
-- -------------------- ---- -------
------ - --------------- ---- - ---- --------------------------------------
----- --------- ------- -------------- -
------ --- ---------- -
------ -----
-------
----- -
-------- ------
-
--------
---------- -----------
--
-
------ --- ------------ -
------ -
--------- -
----- -------
------ --------
------------------- -----
--
--
-
---------- -
------------------------------ ----------------
-
-
----------------------------------- -----------在上面的代码中，我们定义了一个新的 Polymer 元素类 MyElement，并声明了一个静态属性 template，用于定义元素的模板。在模板中，我们使用了 :host 伪类来设置元素的样式，并添加一个标题元素。
此外，我们还声明了一个静态方法 properties，用于定义元素的属性。在本例中，我们声明了一个名为 greeting 的字符串属性，初始化为“Hello”，并指明它可以反映回 DOM 属性。
最后，我们定义了一个非静态方法 sayHello，用于在浏览器控制台中输出“Hello, [name]!”的消息。
运行项目
我们现在可以运行该项目并在浏览器中查看我们的元素。在 my-element 文件夹中，运行以下命令：
polymer serve --open
Polymer CLI 将启动一个本地服务器，并在浏览器中打开一个新的窗口以显示项目。在页面上，您应该会看到我们的自定义元素和“Hello, world!”的消息。
写入测试
要确保我们的元素在运行时正确工作，我们需要编写一些测试。使用 Polymer CLI 工具，我们可以快速创建一个基本的测试模板。
在 my-element 文件夹中，运行以下命令：
polymer generate test my-element
该命令将创建一个新的测试文件 my-element/test/my-element-test.html，其中包含测试示例。
在测试文件中，我们可以使用 Polymer 的测试库（Polymer testing）编写测试。在本例中，我们编写了一个测试函数来确保浏览器控制台正确输出“Hello, Polly!”的消息：
-- -------------------- ---- -------
--------------
----------
----------- ---------------- --------------------------
-----------
--------
--------------------- -- -- -
--- --------
------------- -- -
------- - -----------------
---
-------- ------- -- -- -
-------------------
--------------------------------- ------- ---------
---
---
---------
---------------总结
本文介绍了使用 Polymer 创建自定义元素的过程，并介绍了如何添加属性和方法以及编写测试。使用 Polymer 可以有效地创建高度可重用和易维护的组件，并提高 Web 应用程序的开发效率。希望本文对你有所帮助，欢迎在评论区留言和讨论。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648aba7548841e98948d6798