Custom Elements 是一种 Web 标准，可用于创建自定义元素并扩展现有元素。它可以让开发者更容易地创建可重用的、易于维护的 UI 组件，并可以在不同的 Web 应用程序中共享它们。
Custom Elements 可以帮助开发者实现更好的封装性、可扩展性和可重用性，同时也提高了代码的可读性和可维护性。在 Custom Elements 中，我们可以使用自己定义的标签名称、样式和行为，这允许我们创建类似于原生 HTML 元素的自定义元素。
is 的意义和作用
在 HTML 中，可以通过 Class 和 ID 来定义元素的样式和行为。但 Custom Elements 允许开发者使用 is 属性来给已有的 HTML 元素添加扩展功能。这个属性的值是自定义元素的名称，它告诉浏览器在处理元素时使用哪个元素类。
例如，如果我们有一个自定义的 Toast 组件，我们可以将它绑定到一个 div 元素的 is 属性上，像这样：
<div is="my-toast"></div>
在这个例子中，我们将一个 div 元素转化为了一个自定义组件，它有了我们所期望的样式和行为，同时也支持我们需要的自定义事件和方法。
创建 Custom Elements
Custom Elements 有两种创建方式：使用类和使用原型。
使用类
我们可以创建一个类来定义一个 Custom Element，然后将其注册到 Web 页面中。下面是一个例子：
-- -------------------- ---- -------
----- -------- ------- ----------- -
------------- -
--------
------------------------------ -------------------------
-
-------------- -
-------------------------- - ------
-
-
----------------------------------------- ----------在这个例子中，我们创建了一个继承自 HTMLElement 的类 MyButton，覆盖了它的 constructor 方法。在 constructor 方法中，我们添加了一个 click 事件的监听器，并在事件处理函数中修改了元素的样式。
最后，我们通过调用 window.customElements.define() 方法将 MyButton 类注册为 my-button 元素。
使用原型
第二种创建 Custom Elements 的方式是使用原型技术，这种方式在旧的浏览器中也能够兼容。下面是一个例子：
-- -------------------- ---- ------- --- ------- - ------------------------------------------ ----------------------- - ---------- - ------------------------------ ------------------------- -- --------------- - --------------- - -------- - ------------------------ - ------- - ----------- -- ------------------------------------ - ---------- -------- -------- ----- ---
在这个例子中，我们首先通过 Object.create() 方法创建了一个继承自 HTMLImageElement 原型的对象 MyImage。然后，我们附加了一个 createdCallback 方法作为元素的创建回调函数，并在其中添加了一个 click 事件的监听器。
最后，我们通过调用 document.registerElement() 方法将 MyImage 原型注册为 my-image 元素，并将它扩展到现有的 img 元素。这样，我们就可以使用新的 my-image 元素代替 img 元素，同时保留 img 元素的所有特性。
指导意义
Custom Elements 的出现使得 Web 应用程序有了更好的可重用性和可维护性。通过定义自己的元素，我们可以提高开发的效率，并使代码更加清晰和易于阅读和维护。同时，我们也可以使用已有的元素来创建自定义元素，这样就实现了代码的重用和继承。
下面是一个使用 Custom Elements 的例子：
-- -------------------- ---- ------- --------- ----- ------ ------ ------- ---------------------------- ------- ------ ----------------- ------------------ ------- -------
在这个例子中，我们加载了 my-button.js 文件，并在页面中使用了 my-button 元素。这个元素被注册为一个自定义组件，并且在 JS 文件中定义了特定的行为。
总结
Custom Elements 为我们提供了一种更简单、更灵活的方法来创建自定义的 Web 元素。通过使用这种标准，我们可以提高开发的效率，并使代码更加清晰和易于阅读和维护。在技术上，我们可以使用类、原型等方式来创建自定义元素，以满足不同的需求和情况。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64634570968c7c53b0447711