在前端开发中，我们经常需要定制一些 HTML 标记以达到特定的样式或功能需求。为此，我们可以使用 Custom Elements 技术实现 HTML 标记的扩展，本文将介绍 Custom Elements 技术的使用方法，并详细讲解其中的各个概念与原理。
什么是 Custom Elements？
Custom Elements 是一种 Web 标准技术，它可以让开发者创建自定义 HTML 元素，并在浏览器中使用这些自定义元素。这些自定义元素可以拥有自己的样式、行为和属性，并且可以被添加到文档中的 DOM 树中。
使用 Custom Elements，开发者可以将一组相关的 HTML、CSS 和 JavaScript 封装在一个自定义元素里面。这使得代码更加模块化、可复用和易于维护。
如何创建 Custom Elements？
在创建自定义元素之前，我们需要先了解 Custom Elements 的两种类型：autonomous custom elements 和 customized built-in elements。
Autonomous custom elements
Autonomous custom elements 是完全自定义的元素，它们没有继承任何其他元素的行为和样式，例如：
<my-custom-button></my-custom-button>上面的代码中，my-custom-button 是一个自定义的按钮元素。
要创建一个 autonomous custom element，我们需要使用 window.customElements.define() 方法，如下所示：
class MyCustomButton extends HTMLElement { // 自定义元素的代码逻辑 } window.customElements.define('my-custom-button', MyCustomButton);
上面的代码中，MyCustomButton 是一个继承自 HTMLElement 的 JavaScript 类，它包含了自定义元素的行为和样式逻辑。window.customElements.define() 方法则用于将这个自定义元素注册到浏览器中，在之后的 HTML 文件中使用。
Customized built-in elements
Customized built-in elements 是基于内置 HTML 元素的自定义元素。例如我们可以创建一个自定义的 button 元素，该元素继承了所有默认的按钮行为和样式，同时还可以添加一些自定义行为和样式，例如：
<my-button class="primary">Click me!</my-button>
上面的代码中，my-button 是一个自定义的按钮元素，它继承了所有默认按钮的行为和样式，并添加了一个 class 属性。
要创建一个 customized built-in element，我们需要继承内置元素的 JavaScript 类，并使用 window.customElements.define() 方法注册元素，如下所示：
class MyButton extends HTMLButtonElement { // 自定义元素的代码逻辑 } window.customElements.define('my-button', MyButton, { extends: 'button' });
上面的代码中，MyButton 继承自 HTMLButtonElement，window.customElements.define() 方法的第三个参数 { extends: 'button' } 告诉浏览器这个自定义元素是基于 <button> 元素的，这样浏览器就会自动将 <my-button> 渲染成一个自定义的按钮。
自定义元素的生命周期
Custom Elements 的自定义元素具有以下生命周期：
constructor()：当自定义元素被创建时，会调用该方法。在这个方法中，通常会初始化元素的状态和样式等属性。connectedCallback()：当自定义元素被添加到文档的 DOM 树中，会调用该方法。disconnectedCallback()：当自定义元素从文档的 DOM 树中移除时，会调用该方法。attributeChangedCallback(attributeName, oldValue, newValue)：当自定义元素的某个属性发生改变时，会调用该方法。
-- -------------------- ---- ------- ----- --------------- ------- ----------- - ------------- - -------- -- ----- - ------------------- - -- ------ --- -- - ---------------------- - -- --- --- ---- - --------------------------------------- --------- --------- - -- ------ - -展开代码
如何给自定义元素添加 CSS 样式？
当我们创建一个自定义元素时，可以为它添加自己的样式。要为自定义元素添加样式，可以使用 ::part() 伪类来定位元素的不同部分。
my-custom-button::part(button) { /* Add styles for the button element inside the custom element */ }
上面的代码中，::part(button) 表示 CSS 样式仅适用于 my-custom-button 元素内部的 button 元素。我们也可以使用 ::part() 给自定义元素的其他部分添加样式。
如何给自定义元素添加属性？
当我们为自定义元素添加属性时，可以使用 observedAttributes 静态属性来定义属性列表。
class MyCustomButton extends HTMLElement { static get observedAttributes() { return ['disabled', 'size', 'color']; } // ... }
在 observedAttributes 列表中定义的属性发生变化时，会触发自动的 attributeChangedCallback() 回调函数。
如何使用自定义元素？
在 HTML 中，我们可以像使用内置元素一样使用自定义元素。
<my-custom-button></my-custom-button>我们也可以添加自定义元素的属性。
<my-custom-button disabled size="large" color="red"></my-custom-button>
示例代码
下面是一个完整的自定义元素示例代码。这个自定义元素是一个带有卡片样式的图片元素。
-- -------------------- ---- ------- ----- --------- ------- ----------- - ------ --- -------------------- - ------ ------- ------- - ------------- - -------- ----- ------ - ------------------- ----- ------ --- ----- ------- - ------------------------------ ----- --- - ------------------------------ ----- ---- - ------------------------------- ----------------------------- ----------- ------------------------- ------- ----------------------- -------------------------- ----------------------- -------------------------- ----- ----- - -------------------------------- ----------------- - - -------- - ------ ------ ------- ------ ------- --- ----- ----- -------------- ----- --------- ------- - ---- - ------ ----- ------- ----- - -- ------------------------- -------------------------- ---------------------------- ------------------------- - ------------------------------ --------- --------- - -- ----- --- ----- -- ---- --- ------ - ----- --- - -------------------------------------- ---------------------- ---------- - - - ------------------------------------------ -----------展开代码
接下来在 HTML 中使用自定义元素：
<card-image src="https://picsum.photos/200/200" alt="Random image"></card-image>
本文介绍了 Custom Elements 技术的用法和原理，包括如何创建自定义元素、自定义元素的生命周期、如何给自定义元素添加样式和属性、以及如何在 HTML 中使用自定义元素。Custom Elements 技术使得前端开发更加模块化和可维护，同时也提供了更好的用户体验和交互性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c435cf6e1fc40e36d1988f
