在 web 前端开发中，我们经常遇到需要创建可重复使用的模块的需求。我们希望这些模块是高度灵活和可控的，可以根据需求修改它们的样式、行为和内部结构。Custom Elements 是 web 标准的一部分，可以让我们轻松地创建可自定义的 web 组件，从而满足这样的需求。
Custom Elements 简介
Custom Elements 是 web 标准中的一部分，它定义了一个用于创建自定义 HTML 元素的 API。通过使用 Custom Elements，我们可以将 HTML 元素封装在一个自定义的组件中，为其创建新的行为和样式，并将其公开为一种新的 HTML 标记，可以像任何其他 HTML 标记一样使用。Custom Elements 通常由两个组成部分组成：一个“定义”和一个“实现”。
定义一个 Custom Element
定义一个 Custom Element 需要调用 customElements.define() 方法，该方法接受两个参数：元素名称和元素实现。元素名称必须是一个横线分隔的字符串。例如，如果我们要定义一个名为 "my-element" 的元素，则可以使用以下代码：
class MyElement extends HTMLElement {
constructor() {
super();
}
}
customElements.define('my-element', MyElement);实现 Custom Element 的行为和样式
我们可以通过添加元素的构造函数来自定义元素的行为和样式。此时我们可以调用 this.innerHTML 或 this.textContent 来设置元素的内部结构，也可以通过继承 HTMLButtonElement 等 element 来得到更丰富的 API。
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
-------------- - -
-------
----- -
-------- -----
---------------- -------
------------ -------
----------------- -----
------- --- ----- -----
-------------- ----
---------- -----
-------- -----
------- --------
------------ -----
-
--------
-------------
--
------------------------------ -- -- -
-----------------------
---
-
-
----------------------------------- -----------我们可以看到在 MyElement 类的构造函数中，我们可以使用 this.innerHTML 来创建元素的内部结构，还可以使用 this.addEventListener() 来绑定事件，来实现元素的交互。
同时，我们还可以使用 :host 选择器来设置元素的样式，:host 选择器选择 Custom Element 自身，可以通过它来设置 Custom Element 的样式。通过 <slot></slot> 可以将该组件内添加的内部元素外放，以达到更加接近与普通 HTML 元素的效果。
使用 Custom Element
使用 Custom Element 跟使用任何其他 HTML 元素一样，只需要将其添加到 HTML 中即可：
<my-element>Hello World!</my-element>
Custom Element 的优势
通过 Custom Element，我们可以创建高度自定义的 web 组件，并将其公开为新的 HTML 标记。这些组件有以下优势：
可重用性
Custom Element 可以在应用程序的任何地方使用，无论是在同一应用程序的不同页面之间，还是在不同的应用程序中。这使得我们可以轻松地创建可重用的组件库，并在不同的应用程序中共享和重复使用这些组件。
柔性和可控制性
通过使用 Custom Element，我们可以从更高的级别上重新思考应用程序组件的设计。我们不再需要在 HTML 元素中放置大量的类名和属性，而是可以使用更明确和自然的 markup，从而让我们更好地控制组件的行为和样式。
与现有应用程序的互操作性
Custom Element 是 web 标准的一部分，可以与其他 web 技术（如 Web Components、React、Vue 和 Angular）紧密集成，从而在现有的应用程序中提供更好的互操作性。
示例
下面是一个使用 <my-element> 创建的示例代码：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ------------- ------- --------------- ------- ----------------------------- ------- ------ ----------------- ------------------- ------- -------
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
-------------- - -
-------
----- -
-------- -----
---------------- -------
------------ -------
----------------- -----
------- --- ----- -----
-------------- ----
---------- -----
-------- -----
------- --------
------------ -----
-
--------
-------------
--
------------------------------ -- -- -
-----------------------
---
-
-
----------------------------------- -----------结论
通过 Custom Element，我们可以创建灵活且可控的 web 模块，并将它们公开为新的 HTML 标记。使用 Custom Element 构建的组件具有高度的可重用性和互操作性，可以帮助我们更好地管理和维护大型 web 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67010a290bef792019b0ae02