在现代前端开发中，我们通常会使用各种组件库来方便地构建页面中的交互元素。但随着 Web 平台的发展，浏览器原生提供的 API 能力也越来越丰富，其中就包括了 Custom Elements API。
Custom Elements 允许我们创建自定义的 HTML 元素，这些元素可以被像普通的 HTML 元素一样使用，它们可以被添加到 DOM 树中，可以被 JavaScript 中的其他代码访问和操作。
为什么要使用 Custom Elements
使用 Custom Elements 可以带来诸多好处：
- 更清晰的应用逻辑：通过自定义元素，我们可以将页面中的各个组件封装为单独的元素，每个元素有自己的内部实现，也有独立的 API 可以供外部调用。这样可以使得应用逻辑更加清晰，避免了代码的混淆和耦合。
- 更灵活的表现形式：自定义元素可以自定义 HTML 标签名和样式，从而达到更好的展示效果。它们还可以被使用在 Shadow DOM 中，从而实现更好的样式隔离和 DOM 封装。
- 更高的通用性：通过自定义元素，我们可以将页面的功能拆分成不同的组件，这些组件可以被多个应用复用，提高了代码的可维护性和复用性。
如何使用 Custom Elements
使用 Custom Elements 需要先定义一个继承自 HTMLElement 的类，并给它实现一些生命周期回调和其他需要的方法。然后通过 window.customElements.define 方法来将这个类注册为自定义元素。
定义自定义元素类
下面是一个简单的例子，定义了一个 MyButton 类，它继承自 HTMLElement 类，实现了几个元素的生命周期回调和一些其他的方法：
-- -------------------- ---- ------- ----- -------- ------- ----------- - ------------- - -------- ------------------- ----- ------ --- -- ---- --- ----- ------ - --------------------------------- --------------------------- ---------- ------------------ - --------------------------- ------------------------------------ - -- ----- --- - ------------------- - --------------------- -------- ---- ------ - -- ----- ------------------------------ --------- --------- - --------------------- --------- ------- ------- ---- ----------- -- -------------- - -- --- --- ---- ---------------------- - --------------------- ------- ---- ------ - -- -- ----- -- --- ------- - ------ --------------------------- - -展开代码
在上面的示例中，我们在构造函数中使用 attachShadow 方法创建了一个 Shadow DOM，并创建了一个 button 元素作为内部 DOM。
之后，我们还定义了一些生命周期回调：
- connectedCallback：元素被插入到 DOM 树中时会调用。在这里我们打印了一个日志，表明元素已经被插入到了 DOM 中。
- attributeChangedCallback：元素的某个属性被修改时会调用。在这里我们再次打印了一个日志，表明属性已经被修改。
- disconnectedCallback：元素从 DOM 树中移除时会调用。在这里我们打印了一个日志，表明元素已经被移除。
除此之外，我们还定义了一个 getter 方法，用于获取 label 属性的值。
注册自定义元素
定义了 MyButton 类之后，我们需要通过 window.customElements.define 方法来将它注册为自定义元素：
window.customElements.define('my-button', MyButton);
上面的代码中，我们使用定义了 my-button 标签名来注册 MyButton 类，这样我们就可以在 HTML 中使用 <my-button> 标签来使用这个自定义元素了。
使用自定义元素
使用自定义元素和普通的 HTML 元素是一样的。我们只需要在 HTML 中使用 <my-button> 标签就可以了。
<my-button label="Click me"></my-button>
然后我们就可以在 JavaScript 中使用这个自定义元素了：
const button = document.querySelector('my-button'); console.log(button.label);
当然，我们也可以通过 JavaScript 来动态创建这个元素，并将它添加到 DOM 中：
const button = document.createElement('my-button'); button.setAttribute('label', 'Click me'); document.body.appendChild(button);
自定义元素实践
下面我们通过一个简单的实例来演示如何在实践中使用 Custom Elements。
构建一个计数器
我们假设我们需要在页面中构建一个计数器，可以显示当前计数值，并且有“加1”和“减1”两个按钮，可以实现计数值的修改。
首先我们需要定义一个继承自 HTMLElement 的类 Counter，并实现内部的 HTML 和相关的事件处理函数：
-- -------------------- ---- ------- ----- ------- ------- ----------- - ------------- - -------- ------------------- ----- ------ --- -- ---- --- ----- -- - ----------------------------- -------------- - ---- -------------------------------- ----- ------ - --------------------------------- ------------------ - ----- -------------------------------- -- -- - ---------- -- -- --- ------------------------------------ ----- ------ - --------------------------------- ------------------ - ----- -------------------------------- -- -- - ---------- -- -- --- ------------------------------------ - -- ----- --- - ------------------- - -------------------- -------- ---- ------ - -- ----- ------------------------------ --------- --------- - -------------------- --------- ------- ------- ---- ----------- -- -------------- - -- --- --- ---- ---------------------- - -------------------- ------- ---- ------ - -- -- ----- -- --- ------- - ------ ----------------------------------- -- ----- - -- -- ----- -- --- ---------- - -------------------------- ---------------- ----------------------------------------------- - --------------- - -- ------ ------ --- -------------------- - ------ ---------- - -展开代码
在上面的代码中，我们定义了一个 Counter 类，实现了相关的 HTML 和事件处理代码。构造函数中，我们创建了一个 h2 元素，用于显示计数值，以及两个按钮，用于操作计数值。同时，我们为两个按钮添加了点击事件处理函数，用于自增或自减计数值。
在自增或自减计数值时，我们使用了 Counter 类中定义的 getter 和 setter 方法。getter 方法用于获取 value 属性的值，setter 方法用于设置 value 属性，并同时更新计数器的内部 HTML。
同时，我们还定义了生命周期回调，用于在元素插入到 DOM 中、属性变化和元素移除时打印一些日志。
最后，我们还定义了一个 observedAttributes 的静态方法，用于确定监视哪些属性的变化。这样，每当 value 属性发生变化时，attributeChangedCallback 方法就会被调用。
注册自定义元素
定义 Count 类之后，我们需要通过 window.customElements.define 方法来将它注册为自定义元素：
window.customElements.define('my-counter', Counter);
上面的代码中，我们使用 my-counter 标签名来注册 Counter 类，这样我们就可以在 HTML 中使用 <my-counter> 标签来使用这个自定义元素了。
使用自定义元素
使用自定义元素和普通的 HTML 元素是一样的。我们只需要在 HTML 中使用 <my-counter> 标签就可以了。
<my-counter value="10"></my-counter>
然后我们就可以在 JavaScript 中使用这个自定义元素了：
const counter = document.querySelector('my-counter'); console.log(counter.value);
当我们点击按钮时，计数值就会发生变化，输出的值也会相应地变化。
结语
Custom Elements API 是现代浏览器中一个非常强大的 API，可以帮助我们更好地构建组件化的 Web 应用。使用 Custom Elements 能够提高应用的可维护性和复用性，同时也可以让开发者更加关注应用本身的业务逻辑，而不需要过多地关注 UI 的实现细节。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67bc355fa231b2b7eddac18d
