在前端开发中，我们经常会需要使用一些自定义的元素。这些元素可能是特定功能的组件，也可能是一些样式定制后的现有元素。在过去，实现这些自定义元素的方法通常是使用一些框架或库来帮助我们实现。但是，自从 Web 原生 Custom Elements 被引入后，我们就可以利用它来设计和构建自定义元素了。
Custom Elements 是 Web 标准中的一部分，允许开发者创建自己的 HTML 元素。它可以与 Shadow DOM 和 Customized built-in elements 配合使用，让我们创建具有定制外观和行为的元素。
Shadow DOM
在介绍 Custom Elements 工作原理前，我们先了解一下 Shadow DOM 概念。
Shadow DOM 是一种技术，用于创建封装的 DOM 树。Shadow DOM 允许将 DOM 结构、样式和行为封装在自定义元素内部，使得在这个元素外部的影响最小化。这种封装有助于实现组件化，使组件更加独立和可重用。
在 Custom Elements 中，Shadow DOM 可以在自定义元素内部定义样式和模板。通过封装，我们可以有效地避免在使用自定义元素时，DOM 的样式、结构和行为相互干扰。
Customized built-in elements
Customized built-in elements 是另一种扩展 Web 标准元素的方式。常见的示例包括 <input type="color">、<input type="range"> 和 <progress> 等元素，它们可以使用自定义样式和行为。
在创建自定义元素时，我们有时候希望重写或扩展 Web 标准元素的行为，这时我们可以使用 Customized built-in elements。通过继承 Web 标准元素的方法，我们可以基于标准元素创建自定义元素，并修改其默认行为。
实现一个简单的自定义元素
现在我们来通过一个简单的示例，学习如何利用 Shadow DOM 和 Customized built-in elements 实现自定义元素。
-- -------------------- ---- -------
---- --------- ---------- ---
-------------------------
---- ----- ---------- -- ---
--------
-- -- ---------- ----
----- --------- ------- ----------- -
-- ------
------------- -
--------
-- -- ------ --------- ---- ----------- ------ ---
----- ------ - ------------------- ----- ------ ---
-- ----
----- -------- - -----------------------------------
-- ---- --- --
----- ----- - -
-------- -
------- --- ----- -----
-------- -----
-
-- -
------ ----
-
--
-- ------
------------------ - -
-----------------------
---- ----------------
---------- -----------
------
--
-- ------ ------ --- -
-----------------------------------------------------
-
-
-- - --------- -------- ----------
----------------------------------- -----------
---------在这个示例中，我们定义了一个自定义元素 my-element。首先我们创建了一个MyElement的类，然后在类的构造函数中，创建 Shadow DOM 和组件模板。接着将模板添加到 Shadow DOM 中，并将 MyElement 注册为自定义元素，最后我们可以像使用普通 HTML 元素一样使用该组件。
总结
Custom Elements 是 Web 标准中的一部分，在 Web 应用设计和开发中应用广泛。借助 Shadow DOM 和 Customized built-in elements，我们可以更加高效地构建出具有良好封装性和可重用性的自定义元素。上面的示例只是 Custom Elements 的冰山一角，通过深入了解 Custom Elements，我们可以更好地运用这项技术，完成更加复杂的需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6520f92195b1f8cacd86b134