什么是 Custom Elements？
Custom Elements 是一个 Web Components API，它允许我们创建完全自定义的 HTML 元素。Custom Elements 的设计目标是使开发者可以轻松创建可重用的 Web 组件，同时避免与现有元素和组件发生冲突。
如何定义一个 Custom Element？
要定义一个 Custom Element，我们需要使用 customElements.define() 方法。这个方法接受两个参数：元素名称和一个元素定义对象。元素名称必须符合自定义元素的规范：它必须包含连字符并且必须包含至少一个单词。
下面是一个定义 my-element 元素的示例：
class MyElement extends HTMLElement {
constructor() {
super();
}
}
customElements.define('my-element', MyElement);在上面的示例中，我们定义了一个名为 MyElement 的类，它继承自 HTMLElement。我们还调用了 customElements.define('my-element', MyElement) 方法，将这个类注册为 my-element 自定义元素。
如何使用一个 Custom Element？
使用自定义元素与使用普通的 HTML 元素非常相似。只需要在 HTML 中编写自定义元素的标记，并在 JavaScript 中为它添加必要的行为即可。
下面是一个示例 my-element 元素：
<my-element></my-element>
如果您想将自定义元素与 HTML DOM 中的其他元素集成，您可以使用 DOM API 来选择和操作元素：
const myElement = document.querySelector('my-element');
myElement.innerText = 'Hello, Custom Element!';如何为 Custom Element 添加行为？
我们可以在自定义元素的生命周期方法中添加自定义功能。Custom Elements 暴露了一组生命周期方法，这些方法允许我们在元素被添加到页面、从页面中删除、属性更改等事件发生时采取行动。
下面是 MyElement 自定义元素示例，其中添加了 connectedCallback() 方法来在元素被添加到页面时显示一条消息：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
-
------------------- -
---------------------- ----- -- --- -------
-
-
----------------------------------- -----------如何为 Custom Element 添加样式？
自定义元素与普通 HTML 元素一样，可以使用 CSS 样式来修改其外观。您可以通过在元素定义类中使用 :host 伪类来选择应用样式的自定义元素。
下面是一个示例 my-element 元素，其中使用 :host 伪类添加了一些样式：
-- -------------------- ---- ------- ---------- - -------- ------ ------- --- ----- ------ -------- ----- - ---------- -- - ----------- -- - ---------- - - -------------- -- - ----------- - ----------------- ---- -
在上面的示例中，我们使用 :host 伪类选择要样式化的自定义元素。我们还定义了 .red 类，当应用到自定义元素时，它将更改元素的背景颜色。
总结
Custom Elements 是一个非常有用的 Web Components 技术，它可以让我们创建完全自定义的 HTML 元素，并具有极高的重用性。我们可以使用 customElements.define() 方法来定义自定义元素，使用生命周期方法来添加元素的行为，使用 CSS 样式来修改元素的外观。希望这篇文章能够为您了解 Custom Elements 的使用提供指导。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6450b10c980a9b385b9a48d9