Web Components 是一项非常棒且强大的技术，它可以让我们创建出具有高度可复用性和可组合性的 UI 组件，我们可以在不同的项目中轻易地重用它们。然而，Web Components 的开发过程有时候需要编写大量的样板代码，这对于简单的组件来说非常烦人。
为了简化 Web Components 的开发过程，我们可以使用 Custom Element Helpers。
什么是 Custom Element Helpers
Custom Element Helpers 是一组用于简化 Web Components 开发的工具，它们提供了一些通用的 Web Components 实现模式，简化了 Web Components 的开发过程。
Custom Element Helpers 包含以下几个主要的工具：
defineCE: 用于定义自定义元素。css: 用于声明组件内的样式。html: 用于声明组件的模板。unsafeHTML: 用于将 HTML 字符串呈现为安全的 HTML 片段。
如何使用 Custom Element Helpers
Custom Element Helpers 可以简化 Web Components 的开发过程，让我们能够更快地创建具有可重用性的组件。下面我们来看一个示例。
首先，我们需要加载 Custom Element Helpers 库。你可以从 GitHub 仓库 使用 npm 安装它：
--- ------- ------------------------------
然后，我们需要在代码中导入它：
------ - --------- ---- ---- - ---- ---------------------------------
我们来创建一个简单的自定义元素，它可以显示一些文本内容：
----- --------- ------- ----------- -
------------- -
--------
------------------- ----- ------ ---
-
------------------- -
------------------------- - -
-------
----- -
---------- -----
------ ----
-
--------
--------------------------
--
-
-
------------------------------------------ -----------这是一个比较基本的 Web Components 实现，我们需要手动创建 shadow DOM，并在 connectedCallback 方法中将组件的样式和模板添加到 shadow DOM 中。
现在，我们使用 Custom Element Helpers 可以将上面的代码重写为：
----- --------- - ---------
----- ------- ----------- -
------------------- -
--------------
-
-------- -
----------
-------
----- -
---------- -----
------ ----
-
--------
--------------------------
--
-
-
--
----
---------- -
---------- -----
------ ----
-
--
------------------------------------------ -----------我们使用 defineCE 方法定义了一个 Custom Element，该方法接受一个 JavaScript 类作为参数，该类必须继承自 HTMLElement。然后我们将整个类传递给 defineCE 方法，它将返回一个字符串，该字符串是自定义元素的名称。
我们可以使用 css 方法声明组件内部的样式，这使我们的样式代码更具可读性和可维护性。
在组件的 JavaScript 类中，我们使用了 html 方法来定义组件的模板，这个方法与手动创建 shadow DOM 类似，但它使用了模板字符串语法来减少了冗余的代码。我们还可以使用 ${} 语法在模板中嵌入 JavaScript 表达式，这进一步减少了组件的冗余代码。
最后，我们使用 window.customElements.define 方法来将自定义元素注册到浏览器中。
总结
Custom Element Helpers 可以让我们轻松地创建自定义元素，并且使用它们可以显著地减少我们代码中的冗余。如果你正在开发 Web Components，Custom Element Helpers 绝对值得一试。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64718080968c7c53b0f5d32b