HTML 元素是 Web 开发的基础，但是有时候我们需要一些特殊的元素来实现自己的需求。这时候，使用 Custom Elements 可以让我们创建自定义的 HTML 元素。
什么是 Custom Elements
Custom Elements 是一个 Web 标准，它允许我们创建自定义的 HTML 元素。它的核心是两个 API：customElements.define() 和 HTMLElement 类。
customElements.define() 方法用于定义一个自定义元素，它接受两个参数：元素名称和元素类。元素名称必须包含一个短横线，以避免与原生元素冲突。元素类必须继承自 HTMLElement 类。
class MyElement extends HTMLElement { // ... } customElements.define('my-element', MyElement);
定义了一个名为 my-element 的自定义元素，并将其绑定到 MyElement 类。
如何使用 Custom Elements
定义了一个自定义元素之后，就可以在 HTML 中使用它了。只需要在 HTML 中编写 <my-element></my-element> 标签即可。
<my-element></my-element>但是，由于自定义元素是由 JavaScript 创建的，所以在 HTML 中使用它之前必须先加载 JavaScript 文件。
<script src="my-element.js"></script> <my-element></my-element>
自定义元素的生命周期
自定义元素有自己的生命周期，可以通过继承 HTMLElement 类来实现生命周期方法。常用的生命周期方法有以下几个：
connectedCallback()：元素被插入到文档中时调用。disconnectedCallback()：元素从文档中移除时调用。attributeChangedCallback(attrName, oldVal, newVal)：元素的一个属性被增加、移除、或更改时调用。adoptedCallback()：元素被移动到新的文档时调用。
-- -------------------- ---- ------- ----- --------- ------- ----------- - ------------- - -------- -- --- - ------------------- - ------------------------- - ---------------------- - ------------------------ - ---------------------------------- ------- ------- - --------------- ----------- --- --------- -- ------------ - ----------------- - -------------------------- - - ----------------------------------- -----------展开代码
示例代码
下面是一个简单的自定义元素示例代码，它实现了一个带有计数器的按钮。
-- -------------------- ---- ------- --------- ----- ------ ------ ---------------------- ----- ---------------- ------- --------------------------------- ------- ------ --------------------------------- ------- -------展开代码
-- -------------------- ---- ------- ----- ------------- ------- ----------- - ------------- - -------- ----- ---------- - ------------------- ----- ------ --- ----- ------ - --------------------------------- ------------------ - ------ -------------------------------- -- -- - ------------- -------------- --- ----- ----- - ------------------------------- ----------------- - ---- ------------------------------- ------------------------------ ---------- - -- - ------------------- - -------------- - -------- - ------------------------------------------------- - ----------- - - --------------------------------------- ---------------展开代码
总结
使用 Custom Elements 可以让我们创建自定义的 HTML 元素，从而实现更加灵活和可扩展的 Web 应用程序。它的核心是 customElements.define() 方法和 HTMLElement 类，可以通过继承 HTMLElement 类来实现自定义元素的生命周期方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6584880cd2f5e1655df2968e
