在从零开始开发页面或者应用程序时，我们经常会遇到需要自定义组件的情况，而 JS Custom Elements 就是为此而生的。它可以让前端开发人员自定义 HTML 元素并封装功能，进而对全局命名空间进行解耦以及开发可重用的代码。
JS Custom Elements 是基于 Web Component 标准而产生的，如果你还没有了解过 Web Component 的话，建议在掌握 Custom Elements 前先了解一下相关的知识。
Custom Elements 的主要特点
Custom Elements 是 Web Component 标准中最为基础的一项，它可以让前端开发人员自定义标签来封装功能，并且可以通过 JavaScript 来控制这些自定义标签的行为，使得在与 HTML 元素交互时能够具有更多自定义的行为。
Custom Elements 的主要特点如下：
- 可自定义的元素名称，让我们可以更好地组织 HTML 结构。
- 继承自 HTMLElement，可以利用自定义元素特性。
- 支持 Shadow DOM 和 HTML 模板。
Custom Elements 在其他框架中的使用方法
Custom Elements 最初的设计是用来替代一些传统的 JavaScript 模块化开发中的全局变量。如果你使用的是传统的 jQuery、AngularJS、VueJS 等框架，那么你可能需要去重写大量的代码以使它们能够支持 Custom Elements 标准。
下面以 VueJS 框架为例介绍 Custom Elements 在其他框架中的使用方法。
注册 Custom Elements
VueJS 中的数字计数器组件可以通过 Custom Elements 实现，如下示例：
-- -------------------- ---- -------
--------- -----
------
------
------------- -------- -- -------------
-------
------
---- ---------
-------------------------
------
------- ------------------------------------------------
--------
-- -- ------ -------
------------------------------- -
--------- -------- ------- ----------
----- ---------- -
------ -
-------- -
-
--
-------- ---------- -
--- -- - ----
-- -- ------ ------- ----
------------------- ---------- -
---------------------- -
------------
-- -----
--
-
--
-- --- ---
--- -----
--- ------
--
---------
-------
-------上面的示例代码中，我们使用 VueJS 应用来注册 Custom Element，在 Vue.customElement() 方法中可以传入许多有用的选项，如 template、data、mounted 等，这些选项很大程度上与常规的 VueJS 组件的选项类似。
使用 Custom Elements
在 VueJS 框架中，我们需要将注册过的 Custom Elements 视为原生 HTML 标签来使用。如下代码展示了如何使用在 vue.component() 中注册过的 <my-counter> 元素：
<div id="app">
<my-counter></my-counter>
</div>
<script>
new Vue({
el: '#app'
})
</script>当 VueJS 应用开始创建时，它会自动发现并注册所有已定义的 Custom Elements，然后以同样的方式来处理其它标准的 HTML 元素。
总结
JS Custom Elements 是 Web Component 标准中最为基础的一项，可以让前端开发人员自定义标签来封装功能，并且可以通过 JavaScript 来控制这些自定义标签的行为。除了上述介绍的 VueJS，AngularJS、React 等框架也都支持 Custom Elements，只不过实现方式不同。因此，作为一名前端开发人员，在掌握 Custom Elements 的同时也需要了解框架对其使用的具体实现方式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64698056968c7c53b0965d76