随着前端技术的发展，自定义组件已经成为前端开发不可或缺的一部分，而 Custom Elements 是用于创建自定义元素的一种新的方法，它可以使开发者更加容易地创建和维护这些组件。在本文中，我们将详细讲解如何使用原生 JS 创建自定义元素，并提供示例代码，帮助读者深入了解这一技术。
自定义元素
在过去，网页开发只能使用 HTML、CSS 和 JavaScript 来创建界面元素。但是在现代化的 Web 应用程序中，需要更多的控件和自定义元素，这使得我们需要更加灵活的开发方式。
自定义元素是指可以根据开发者需要创建的一类 HTML 元素，这些元素可以使用定制的 HTML 标签名称、属性和方法，而不仅仅是 HTML 标准中默认提供的元素。
举个例子，如果我们需要在页面中创建一个新的按钮，我们可以使用 <button> 标签来创建它。但如果我们要创建一个具有特殊样式和行为的按钮，比如仿照 iOS 操作系统的圆形按钮，使用默认的 <button> 标签会非常麻烦，需要耗费大量时间和精力。这时我们就可以选择使用自定义元素来创建这个按钮，使用定制化的 HTML 标签名称、属性和方法，简化我们的开发流程。
Custom Elements
Custom Elements 是一种能够让开发者定义和注册自定义元素的方法。它可以让我们通过 JavaScript 来扩展和增强 HTML 的局限性，从而实现更加个性化的界面元素。
与传统的 JavaScript 元素扩展相比，Custom Elements 更加规范化，支持对开发者创建的新元素进行自动化注册和定义。
自定义元素分为两种类型：Autonomous Custom Elements 和 Customized Built-in Elements。Autonomous Custom Elements 是由开发者定义和创建的自定义元素，而 Customized Built-in Elements 是基于现有的 HTML 元素扩展而来的自定义元素。这两种不同类型的元素都可以使用 Custom Elements 来创建。
下面我们将演示如何使用 Custom Elements，创建一个名为 "simple-clock" 的自定义元素，它可以显示当前的时间。
Step 1 - 定义元素
首先，我们需要创建一个 JavaScript 类，继承于基类 HTMLElement，来定义我们的自定义元素。
class SimpleClock extends HTMLElement {
}Step 2 - 添加必要的方法
在创建完类后，我们需要添加 element 生命周期的回调函数，以便我们能够在元素创建或删除时执行一些自定义操作。这里我们需要用到 "connectedCallback()" 和 "disconnectedCallback()" 这两个函数。
"connectedCallback()" 函数在元素被添加到 DOM 树时被触发，让我们可以手动添加元素中的内容。
"disconnectedCallback()" 函数在元素被从 DOM 树中删除时被触发，允许我们清除一些资源或状态。
-- -------------------- ---- -------
----- ----------- ------- ----------- -
------------- -
--------
-
------------------- -
-- ------
-------------- - -
----- --------------- ----------------
--
-- ------
--------------- - -------------- -- -
------------------------------------ - --- ----------------------------
-- ------
-
---------------------- -
-- -----
-------------------------------
-
-Step 3 - 添加自定义属性
我们可以通过在类中定义 "observedAttributes" 的静态 get 方法，将元素的属性设置为观察属性，从而监听属性值的变化。如果元素所拥有的一个属性被改变时，"attributeChangedCallback()" 函数会被触发，对应的属性名称、旧值和新值将被传递给回调函数。
-- -------------------- ---- -------
----- ----------- ------- ----------- -
------------- -
--------
-
------ --- -------------------- -
------ ----------
-
------------------- -
-- -------
-- ----------------------------- -
-------------------------- ---------
-
-- ------
-------------- - -
----- ------------- ------------------------------ --------------- ----------------
--
-- ------
--------------- - -------------- -- -
------------------------------------ - --- ----------------------------
-- ------
-
---------------------- -
-- -----
-------------------------------
-
------------------------------ --------- --------- -
-- ----- --- -------- -
---------------- - ---------
-------------------------------------- - ---------
-
-
-Step 4 - 注册元素
最后，我们需要注册元素，以便浏览器将我们的类与自定义元素名称关联起来。我们可以使用 "customElements.define()" 函数来实现这个操作。
customElements.define("simple-clock", SimpleClock);完整代码
-- -------------------- ---- -------
----- ----------- ------- ----------- -
------------- -
--------
-
------ --- -------------------- -
------ ----------
-
------------------- -
-- -------
-- ----------------------------- -
-------------------------- ---------
-
-- ------
-------------- - -
----- ------------- ------------------------------ --------------- ----------------
--
-- ------
--------------- - -------------- -- -
------------------------------------ - --- ----------------------------
-- ------
-
---------------------- -
-- -----
-------------------------------
-
------------------------------ --------- --------- -
-- ----- --- -------- -
---------------- - ---------
-------------------------------------- - ---------
-
-
-
------------------------------------- -------------使用自定义元素
现在我们已经定义了 "simple-clock" 元素，我们可以在 HTML 中使用它：
<simple-clock color="red"></simple-clock>
这样就可以在页面上创建一个元素，它会随时间变化而更新内容，并且我们可以通过改变 color 属性来改变它的颜色。
总结
在本文中，我们学习了 Custom Elements 的基本概念和用法，了解了如何使用原生 JS 创建自定义元素，并提供了详细的示例代码和指导意义，希望能帮助读者更好地理解和使用这一技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646ad11e968c7c53b0a4a941