Web Components 是一项创新性的 Web 标准，它包含三种技术：Custom Elements、Shadow DOM 和 HTML Templates。其中，Custom Elements 技术是指允许开发者创建自定义元素来扩展 HTML 语言的能力。Custom Elements 具有很高的灵活性，可以用于开发各种组件，如日历控件、图表组件等。
在这篇文章中，我们将讨论如何定义 Custom Elements，包括自定义元素的创建和使用，同时提供示例代码和技巧帮助你更好地理解这项技术。
Custom Elements 的创建
创建 Custom Elements 的第一步是继承 HTMLElement 类。通过这个步骤，我们可以扩展已有的 HTML 元素，也可以创建全新的自定义元素。例如，下面的代码演示如何创建一个新元素，叫做 my-custom-element。
class MyCustomElement extends HTMLElement { constructor() { super(); // 在构造函数里可以定义一些变量或者初始化 } }
创建 Custom Elements 派生类时，还可以实现以下几个方法：
connectedCallback()：当 Custom Element 被插入到文档中时会被调用。disconnectedCallback()：当 Custom Element 被从文档中移除时会被调用。attributeChangedCallback(attrName, oldVal, newVal)：当 Custom Element 的属性被增加、移除、或者更改时会被调用。adoptedCallback()：当 Custom Element 被移动到另一个文档时会被调用。
下面是一个示例代码，演示如何创建一个名为 my-date-picker 的 Custom Element，并且定义了 connectedCallback() 方法。
-- -------------------- ---- ------- ----- ------------ ------- ----------- - ------------- - -------- -- ------- - ------------------- - ------------------------------ ------------------------------ -- - ------ ------- ------ ------ --- - ----- ---------- - ------------------------ --------- -------------------- - - ------- -------- - --------- --------- - --------- - --------- --------- - -------- ---- ---------------- -------------- ------------- ---- ----------------- ---- ------ ---- -- --- ------ ------ -- - -------------- - -- --------- - - --------------------------------------- --------------展开代码
通过 customElements.define() 方法，我们将新元素与自定义类进行绑定。这样，在 HTML 中就可以直接使用 my-date-picker 标签了。
Custom Elements 的使用
在 HTML 中使用 Custom Elements 很简单，只需要像使用普通元素一样使用自定义元素即可。例如，我们如下的 HTML 代码使用 my-date-picker 自定义元素。
<my-date-picker></my-date-picker>至此，我们已经成功创建了自定义元素，并在 HTML 中使用了它。
Hack 技巧
在开发 Custom Elements 的过程中，有以下几种常见的 Hack 技巧，可以在某些场景下帮助我们更好地处理一些细节问题。
使用 shadow DOM
因为 Custom Elements 是可以被其它开发者使用的，为了确保 Custom Elements 和其它代码之间不会相互干扰，我们可以使用 shadow DOM 技术，将 Custom Elements 封装在 shadow DOM 之中。
-- -------------------- ---- ------- ----- -------------- ------- ----------- - ------------- - -------- ----- ---------- - ------------------------ --------- -------------------- - - ------- ----- - -------- ------------- ------- ----- ----------------- -------- -------- ----- -------------- ---- ------- -------- - -------- ------------------------------ -- - - ----------------------------------------- ----------------展开代码
在 Custom Elements 类的构造函数中，通过 attachShadow() 方法创建了一个新的 shadow DOM 节点，并将 Custom Elements 的标记渲染到其中。为了实现数据穿透，我们通过 <slot> 元素实现在 Custom Elements 上插入文本，它能够将插入到 Custom Elements 中的文本插入到 shadow DOM 的对应位置。
使用 observedAttributes
Custom Elements 的属性可以用来在外部传递数据到 Custom Elements 内部，并且还可以通过 attributeChangedCallback() 监听属性的变化。但是，如果有多个属性值需要监听时，定义多个监听函数会显得比较冗余。为了解决这个问题，可以使用 observedAttributes 静态属性来监听多个属性的变化。
-- -------------------- ---- ------- ----- --------------- ------- ----------- - ------ --- -------------------- - ------ --------- ----------- - -- --- ---------------------------------- ------- ------- - ------ ---------- - ---- -------- -- --- ------ ---- ---------- -- --- ------ - - -展开代码
在静态属性 observedAttributes 中，我们可以定义 Custom Elements 派生类需要监听的属性名称列表。此时，当属性被修改时，attributeChangedCallback() 方法将被调用，并根据不同的属性名称执行相应的操作。
使用 ES6 模块
Custom Elements 文件推荐使用 ES6 模块，这样可以将多个类定义在一个文件中，方便管理代码。使用 ES6 模块的文件可以在 HTML 中引用，使用 type="module" 属性即可。
<script type="module" src="./my-custom-element.js"></script>
结束语
Custom Elements 技术是一项强大而灵活的 Web 技术，它允许开发者创建自定义元素并在 HTML 中使用。在本文中，我们讨论了 Custom Elements 的创建和使用，以及几种 Hack 技巧。希望通过本文，读者可以更好地理解 Custom Elements 技术，并且能够在实际开发中更好地使用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67925e7a504e4ea9bd630d31
