Web Components 是一种被广泛推广和应用的前端技术，它可以让开发者创建可复用和自定义的 HTML 元素。其中 Custom Elements 是它的一个核心组成部分，但是官方文档在解释 Custom Elements 方面存在一些误导，导致一些开发者在使用时遇到了困难。本文将为你揭示 Custom Elements 的正确应用方式，并给出示例代码，以便更好地理解和应用。
Custom Elements 的误导
在官方文档中，关于 Custom Elements 的描述为“自定义元素”，这给人的印象是它可以让开发者创建自己的 HTML 标签，例如 <my-element>，然后在页面上像其他标签一样使用。然而，在实践中我们发现，这种方式仅仅是给自定义的 HTML 元素一个名称，并没有什么实际的效果。
实际上，Custom Elements 的作用更为强大，它允许开发者通过 JavaScript 创建出自定义的 HTML 元素，并提供了丰富的生命周期和方法等 API。这样的元素和内置的 HTML 元素一样拥有 DOM API、CSS 样式、JavaScript 事件等基本属性。从这个意义上说，Custom Elements 更像是一种 JavaScript 类的封装方式，而不是HTML元素的扩展方式。
正确的应用方式
正确的使用 Custom Elements 的方式是，继承 HTMLElement 或其子类，并且实现 connectedCallback 等生命周期方法。在实现类的时候，我们需要调用 customElements.define API 来注册我们的 custom element，把类名和 tag 名称注册到全局空间中。例如：
class MyElement extends HTMLElement { connectedCallback() { this.innerHTML = `<h1>Hello World</h1>` } } customElements.define('my-element', MyElement)
在上面的示例中，我们定义了一个名为 MyElement 的 JavaScript 类，并且在它的 connectedCallback 生成了一个 h1 标签并插入到自定义元素的内部。通过 customElements.define，我们将这个自定义元素和它的 JavaScript 类关联起来，并且我们可以在 HTML 中使用自定义标签 <my-element>。
生命周期
在使用 Custom Elements 时，我们需要了解它的生命周期方法，这些方法包括：
constructor(): 当自定义元素被创建的时候被调用。通常用于初始化一些属性或状态信息。connectedCallback(): 当自定义元素被插入到文档中时被调用。通常用于生成自定义元素的内容或添加一些事件监听器。disconnectedCallback(): 当自定义元素从文档中被移除时被调用。通常用于移除事件监听器或清理内存等。attributeChangedCallback(attributeName, oldValue, newValue): 当自定义元素的某个属性发生变化时被调用。通常用于针对属性变化做出响应。
指导意义
Custom Elements 是一个很有用和强大的技术，它为我们提供了一个完整的解决方案来创建可复用、可扩展和自定义的 HTML 元素。因此，学习 Custom Elements 对于现代 web 应用的开发者来说是非常重要的。
此外，在使用 Custom Elements 的时候，一定要注意官方文档的误导，并且深入了解这项技术的本质和应用方式。在编写代码的时候，应该遵循正确的应用方式，并且灵活地应用生命周期等 API，以便更好地满足业务需求。
示例代码
下面是一个完整的示例代码，用于展示 Custom Elements 的正确应用方式：
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- ------------- -------- ------------ ------- ------ ------------------------- -------- ----- --------- ------- ----------- - ------------------- - -------------- - ---------- ----------- - - ----------------------------------- ---------- --------- ------- -------展开代码
在这个示例代码中，我们定义了一个 MyElement 类，然后使用 customElements.define() 将其关联到了自定义标签名 my-element 上。最后，在 HTML 中使用 <my-element> 即可生成自定义元素，并触发 connectedCallback 方法执行内部内容的生成。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67b8088d306f20b3a657858a
