随着Web应用程序的日益普及，许多企业开始购买和定制自己的Web应用程序。 前端开发人员可以使用许多不同的工具来构建单页应用程序（SPA）。 但是，一些应用程序需要许多自定义元素并且不能再使用现有的HTML元素，这时候Custom Elements就派上用场了。
Custom Elements是一种新的Web API，可以自定义HTML元素。这些自定义元素可以添加新的行为和功能，使开发人员可以更轻松地开发高度可定制的Web应用程序。
在此文章中，我们将讨论使用Custom Elements构建商业级应用程序的方法，并向您展示如何在生产项目中使用Custom Elements。
创建自定义元素
首先，我们需要创建自定义元素。要创建一个自定义元素，您需要定义一个类，并使用 customElements.define() 注册该类。
-- -------------------- ---- -------
----- --------------- ------- ----------- -
------------- -
--------
-
------------------- -
-------------- - ----------- -------------
-
-
------------------------------------------ -----------------在这个例子中，我们创建了一个名为“my-custom-element”的自定义元素，并覆盖了connectedCallback方法。
connectedCallback() 方法是这个元素的生命周期钩子。在元素被添加到DOM中时调用该方法。
我们使用innerHTML属性在元素中添加了一个标题。
注册多个自定义元素
要注册多个自定义元素，您可以在同一个JavaScript文件中创建多个自定义元素并使用 customElements.define() 分别注册它们。
-- -------------------- ---- -------
----- -------------- ------- ----------- -
------------- -
--------
-
------------------- -
-------------- - ---------- ---- -- ----- ------ --------------
-
-
----- --------------- ------- ----------- -
------------- -
--------
-
------------------- -
-------------- - ---------- ---- -- ------ ------ --------------
-
-
----------------------------------------- ----------------
------------------------------------------ -----------------在这个例子中，我们创建了两个自定义元素：my-first-element 和 my-second-element。
在每个元素的 connectedCallback() 方法中，我们向元素添加了一些HTML。
请注意，我们在每个元素的构造函数中调用了 super() 方法，这是由于 MyFirstElement 和 MySecondElement 继承自 HTMLElement 类。
在自定义元素中添加属性
自定义元素还可以包含自定义属性。要为元素添加属性，您可以使用 element.setAttribute("attribute-name", "attribute-value") 方法。
您可以使用 element.getAttribute("attribute-name") 方法获取元素的属性。
示例：
-- -------------------- ---- -------
----- --------------- ------- ----------- -
------------- -
--------
-
------------------- -
----- ---- - ------------------------- -- --------
-------------- - ----------- ---------------
-
-
------------------------------------------ -----------------
----- --------- - --------------------------------------------
------------------------------ --------
-------------------------------------在这个例子中，我们添加了 name 属性。如果该属性不存在，则默认为 “World”。
在 connectedCallback() 方法中，我们获取 name 属性并将其用于元素的文字内容。
嵌套自定义元素
自定义元素也可以嵌套在另一个自定义元素中。
示例：
-- -------------------- ---- -------
----- --------------- ------- ----------- -
------------- -
--------
-
------------------- -
-------------- - ----- -- ------ ------ -----------------------
-
-
----- --------------- ------- ----------- -
------------- -
--------
-
------------------- -
-------------- - ----------- -------------
----- ------------- - --------------------------------------------
--------------------------------
-
-
------------------------------------------ -----------------
------------------------------------------ -----------------在这个例子中，我们创建了两个自定义元素，一个是 my-custom-element，另一个是 my-nested-element。
在 MyCustomElement 的 connectedCallback() 方法中，我们向元素添加了一个标题，并创建另一个自定义元素 MyNestedElement，然后将其嵌套在 MyCustomElement 中。
使用 Shadow DOM
有时，我们需要保护自定义元素内部的样式和脚本。使用Shadow DOM可以实现这种保护。
要使用 Shadow DOM，请使用 this.attachShadow({mode: "open"}) 方法。该方法会返回一个根节点，您可以在其中添加HTML内容。
示例：
-- -------------------- ---- -------
----- --------------- ------- ----------- -
------------- -
--------
----- ---------- - ------------------------ ---------
-------------------- - -
-------
-- -
------ ----
-
--------
---------- -----------
--
-
-
------------------------------------------ -----------------在这个例子中，我们创建了一个名为 my-shadow-element 的自定义元素，并使用Shadow DOM添加了一些CSS样式和一个标题。
将自定义元素用于商业级应用程序
在商业级应用程序中，您需要掌握更高级的技术，才能实现更复杂的功能。
以下是一些技术，可帮助您将自定义元素用于商业级应用程序：
工具集成
您可以使用Web组件工具集成自定义元素。这些工具可以帮助您创建，测试，文档化和维护自定义元素。
Stencil是一个Web组件库，可以帮助您构建高性能的自定义元素，该库提供了许多工具集成功能。
CSS框架
您可以使用CSS框架来更轻松地设计和构建自定义元素。这些框架可以提供一些功能，如网格系统，样式预处理器和UI组件。
Bootstrap和Materialize是两个流行的CSS框架，可以用于设计和构建自定义元素。
状态管理
如果您的自定义元素需要包含状态，请考虑使用状态管理库。状态库可以让您跟踪应用程序状态的变化，并确保UI元素始终与状态同步。
Redux是一个流行的JavaScript状态管理库，可用于跟踪状态并调度状态更改。
TypeScript
TypeScript是一个强类型的JavaScript超集，可帮助您在编写自定义元素时更轻松地编写可维护，可测试和可扩展的代码。
TypeScript可以大大缩短调试时间，同时还可以提高代码的可读性和可维护性。
结论
Custom Elements是一个有用的Web API，可以帮助您创建高度可定制的Web应用程序。 在本文中，我们了解了如何创建，注册和使用自定义元素。
我们还讨论了一些技术，可以帮助您将自定义元素用于商业级应用程序。希望这篇文章能帮助您了解Custom Elements如何使用在现代Web应用程序中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f2cb33a44b36ee5767a629