什么是 Custom Elements
Custom Elements 是 Web Components 的一部分，它允许开发者定义自己的 HTML 元素，包括它们的行为和样式。这些自定义元素可以像原生 HTML 元素一样使用，并且可以在不同的页面和应用程序之间重复使用。
Custom Elements API 包括两个部分：
- 自定义元素定义：使用
window.customElements.define()方法定义一个自定义元素。 - 生命周期回调：自定义元素有一些生命周期回调，可以在元素被创建、插入文档、属性被更改或被移除时执行一些操作。
如何创建 Custom Elements
下面是一个简单的 Custom Elements 示例，它创建了一个自定义元素 <my-element>，并在元素被创建时向控制台输出一条消息：
class MyElement extends HTMLElement { constructor() { super(); console.log('MyElement created'); } } window.customElements.define('my-element', MyElement);
上面的代码使用 class 关键字定义了一个 MyElement 类，它继承了 HTMLElement 类。在 constructor 方法中，我们调用了 super() 方法，这样我们就可以访问 HTMLElement 的属性和方法。
接下来，我们使用 window.customElements.define() 方法定义了一个名为 my-element 的自定义元素，并将 MyElement 类作为第二个参数传递。
如何使用 Custom Elements
使用自定义元素非常简单，只需要在 HTML 中使用自定义元素的标签即可。下面是一个使用 <my-element> 标签的示例：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ------------- -------- ------------ ------- ------ ------------------------- ------- ----------------------------- ------- -------展开代码
在上面的示例中，我们在 <body> 中使用了 <my-element> 标签，并在 <script> 中引入了 my-element.js 文件，这个文件包含了我们定义的 MyElement 类。
当我们打开这个 HTML 文件时，我们会在浏览器的控制台中看到一条消息，这是因为我们在 MyElement 类的构造函数中输出了一条消息。
如何给 Custom Elements 添加属性和方法
我们可以给自定义元素添加属性和方法，让它们具有更多的行为和功能。下面是一个示例，它给 <my-element> 元素添加了一个 message 属性和一个 logMessage() 方法：
-- -------------------- ---- ------- ----- --------- ------- ----------- - ------------- - -------- ---------------------- ---------- - --- --------- - ------ ----------------------------- - --- -------------- - ---------------------------- ------- - ------------ - -------------------------- - - ------------------------------------------ -----------展开代码
在上面的代码中，我们添加了一个 get 和一个 set 方法来访问 message 属性。在 logMessage() 方法中，我们输出了 message 属性的值。
现在，我们可以在 HTML 中使用 message 属性和 logMessage() 方法了：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ------------- -------- ------------ ------- ------ ----------- --------------- --------------------- ------- ----------------------------- -------- ----- ---- - ------------------------------------- ------------------ -- -- ------- ------- --------- ------- -------展开代码
在上面的示例中，我们在 <my-element> 标签中添加了一个 message 属性，并在 JavaScript 中调用了 logMessage() 方法。
使用 Custom Elements 创建可嵌入的 Web 组件
使用 Custom Elements，我们可以轻松地创建可嵌入的 Web 组件，这些组件可以在不同的页面和应用程序之间重复使用。下面是一个使用 Custom Elements 创建可嵌入的按钮组件的示例：
-- -------------------- ---- ------- ----- -------- ------- ----------- - ------ --- -------------------- - ------ ------------- - ------------- - -------- ------------------- ----- ------ --- ----- -------- - ----------------------------------- ------------------ - - ------- ------ - ----------------- -------- ------ ------ ------- ----- -------------- ---- -------- --- ----- ---------- ----- ------- -------- - ---------------- - -------- ---- ------- ------------ - -------- ------------------------------ -- -------------------------------------------------------------- - ------------------------------ --------- --------- - ----- ------ - ---------------------------------------- -- ----- --- ---------- -- -------- --- ----- - ------------------------------- ---- - ---- - ----------------------------------- - - --- ---------- - ------ ------------------------------ - --- --------------- - -- ------- - ----------------------------- ---- - ---- - --------------------------------- - - - ----------------------------------------- ----------展开代码
在上面的代码中，我们创建了一个名为 MyButton 的自定义元素，并添加了一个 disabled 属性。在 constructor 方法中，我们创建了一个 Shadow DOM，并通过插入一个模板元素来定义按钮的样式和 HTML 结构。
在 attributeChangedCallback() 方法中，我们检测 disabled 属性的变化，并更新按钮的 disabled 属性。在 get 和 set 方法中，我们访问和设置 disabled 属性。
现在，我们可以在 HTML 中使用 <my-button> 标签来创建按钮：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ------------- -------- ------------ ------- ------ ---------------- -------------- ---------- ----------------- ------------------ ------- ---------------------------- ------- -------展开代码
在上面的示例中，我们创建了两个按钮，一个是可用的，一个是禁用的。我们还引入了 my-button.js 文件，这个文件包含了我们定义的 MyButton 类。
总结
Custom Elements 是 Web Components 的一部分，它允许开发者定义自己的 HTML 元素，并为这些元素添加属性和方法，创建可嵌入的 Web 组件。使用 Custom Elements，我们可以轻松地创建可重复使用的组件，使我们的开发工作更加高效和便捷。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6562f16dd2f5e1655dcae3f4
