什么是 Custom Elements
Custom Elements 是 web components 的一个重要组成部分，是一种自定义 HTML 元素的技术，可以通过定义自己的元素来扩展 HTML 标准元素的功能，使我们可以更方便地创建组件化的 UI。
Custom Elements 的核心 API 包括：customElements.define()，CustomElementRegistry.define()，HTMLElement 等。
为什么要使用 Custom Elements
在传统的 Web 开发中，我们经常需要在 HTML 中写大量的样板代码，并且在不同的页面中重复使用相同的 UI 组件。这样不仅浪费时间精力，还会导致不一致性和难于维护。
而使用 Custom Elements 开发 UI 组件，就可以将 UI 组件封装到一个独立的自定义元素中，使得 UI 组件变得更为独立、灵活、易维护和复用。
实现复杂与简单共存 UI 的示例
下面我们将介绍如何使用 Custom Elements 来实现一个复杂与简单共存 UI 的示例。
实现思路
我们会创建一个包含一个按钮和一个图像的自定义元素，可以通过按钮切换图像的大小。
我们会创建一个名为 <my-img> 的自定义元素，它可以接受以下属性：
src：图片的 URLwidth：图片的宽度height：图片的高度
同时，我们还会在 <my-img> 中创建一个名为 <my-btn> 的内部自定义元素，它会监听按钮的点击事件，并根据用户的选择修改 <my-img> 的样式。
示例代码
下面是实现示例的代码：
-- -------------------- ---- -------
---- -- ------ ----- ---
------- ----------------- ----------- -------------
---- -------- ------ -- ---
-------------- ----- -------------
---------
--------
-- -- ------ -----
----- ----- ------- ----------- -
------------- -
--------
-- ---- ------ ---
----- ------ - ------------------- ----- ------ ---
-- ---------
----- -------- - -------------------------------------------
----- -------- - ---------------------------------
-----------------------------
-- ----- --- --- --------- - ------ --
----- --- - ----------------------------
------- - -------------------------
--------- - -------------------------- -- ----
---------- - --------------------------- -- ----
-- -- ------ --------
----- --- - -------------------------------
----------------------------- -- -- -
-- ---------- --- ---- -
--------- - ----
---------- - ----
- ---- -
--------- - ----
---------- - ----
-
---
-
-
-- -- ------ -----
----- ----- ------- ----------- -
------------- -
--------
----- ------ - ------------------- ----- ------ ---
----- -------- - -------------------------------------------
----- -------- - ---------------------------------
-----------------------------
-
-
-- -- ------ - ------ -----
------------------------------- -------
------------------------------- -------
---------
---- -- ---
--------- ---------------------
-------
----- -
-------- ------
--------- ---------
-
----- --- -
-------- ------
------- - -----
-
--------
-----
-------------
-----------
--------- ---------------------
-------
------ -
------- ---- -----
-------- ------
-
--------
------------------------------
-----------在上面的代码中，我们定义了两个 Custom Elements：<my-img> 和 <my-btn>。
其中，<my-img> 中包含一个图片和一个按钮；<my-btn> 是 <my-img> 的内部元素，用于切换图片的大小。
使用 customElements.define() 注册自定义元素时，需要传入两个参数：
- 第一个参数是元素名称，必须包含一个横线（如
my-element）。 - 第二个参数是元素类，它应该继承自
HTMLElement。
在 MyImg 和 MyBtn 构造函数中，我们创建了 shadow DOM，并将模板的内容克隆到 shadow DOM 中。
MyImg 构造函数还设置了图片的来源、宽度和高度，并设置了 MyBtn 的单击事件监听器来切换图片的大小。
最后，我们在文档的末尾定义了两个模板，分别用于 <my-img> 和 <my-btn> 自定义元素的渲染。
总结
Custom Elements 是现代 Web 开发中非常重要的一个功能，可以让我们更方便地创建组件化的 UI。我们通过实现一个复杂与简单共存 UI 的示例，介绍了 Custom Elements 的创建、使用和模板技术等相关知识点。
通过学习本文，希望能对 Custom Elements 技术有更深入和系统的了解，并能够为你在实际开发中提供参考和指导。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649151f848841e9894f52e0e