Web Components 是一项 W3C 标准，这一标准将多个技术结合在一起，使其进一步集成于浏览器中，增强了现有的 HTML、CSS 和 JavaScript 技术。其中 Custom Elements 是其中重要的一个特性，是我们可以创建自定义的 HTML 元素，并且可以自定义其表现和行为，这个特性带来了许多有用的应用场景。
适配器模式
在使用 Custom Elements 时，我们需要继承自 HTMLElement，然后编写一些自定义逻辑来定义我们想要的行为或样式。在这个过程中，Custom Elements 属性与方法的内部机制要求我们严格按照 W3C 标准进行实现，这就是适配器模式的应用。
适配器模式是一种应对非兼容接口的常用设计模式。可以将其理解为一种转接器，帮助我们将标准接口转换为外部的非标准接口。在 Custom Elements 的实现中，它充当了一个适配器角色，将自定义元素的行为和外部样式适配到标准的 HTMLElement 上。
下面是一个简单的 Custom Elements 示例，展示了一个带有按钮的计数器控件。
--------- -----
------
------
----- ----------------
---------- ------------------
-------
------
-------------------------
--------
----- --------- ------- ----------- -
------------- -
--------
----------- - --
----- ------ - ------------------- ----- ------ ---
----- ------- - ------------------------------
----------------------------- -----------
----- --------- - -------------------------------
------------------------------- ---------
--------------------- - ------------
----- ------ - ---------------------------------
---------------------------- -------------
------------------ - ------------
----------------------------
-------------------------------
----------------------------
-
--- ------- -
------ ------------
-
--- --------------- -
----------- - ---------
--------------------------------------------------- - ------------
-
-
----------------------------------- -----------
---------
-------
-------这个计数器有一个值，它可以通过 value 属性读取或设置，另外还有一个增加按钮。当用户点击按钮时，计数器的值增加。
在这个示例中，我们继承了 HTMLElement，其中包含了大量内部实现，它遵循了 W3C 的标准，我们可以从 HTMLElement 中调用到各种属性和方法，例如 attachShadow、setAttribute、textContent 等等。假设我们没有 HTMLElement 的帮助，那么我们需要自己实现这一大堆的属性和方法，这无疑会非常繁琐。
而在适配器模式中，我们可以通过 extender 属性，去“继承”外部的非标准接口，转换为标准接口。在 Custom Elements 中，我们通过继承 HTMLElement 的方式，来将我们的非标准定义的行为和样式适配到标准的 HTMLElement 上，这样我们就不需要自己重新实现那么多的 API，也不需要去关心浏览器的实现差异问题。
结论
Custom Elements 是 Web Components 接口中最重要的一部分，它为用户提供了创建自己的 HTML 元素的能力，并且能够适应不同的应用场景。与适配器模式相结合，它能够让我们更加方便地编写自定义的组件，并且简化了不同浏览器之间的差异问题。它具有很高的实用性和指导意义，可以帮助我们更好地理解 Custom Elements 的底层机制并运用到实际开发中。
参考链接：
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/670f8eeb5f55128102655c6c