Custom Elements 是 Web Components 的一个核心技术，其实现了在 Web 页面中创建自定义 HTML 标签的能力。在小程序中使用 Custom Elements 技术，可以提高页面的可复用性和可维护性。
Custom Elements 的基本使用
在使用 Custom Elements 之前，首先要定义一个自定义元素。定义自定义元素有两种方式：
- 继承 HTMLElement
-- -------------------- ---- ------- ----- --------------- ------- ----------- - ------------- - -------- - ------------------- - -------------------------- - - ------------------------------------------ ----------------- - 使用 document.registerElement()
-- -------------------- ---- ------- --- --------------- - --------------------------------------------- - ---------- ------------------------------------ - ------------------ - ------ ---------- - -------------------------- - - -- ---
通常情况下，继承 HTMLElement 更为常用和方便。
定义完自定义元素之后，就可以像使用普通 HTML 标签一样使用它：
<my-custom-element></my-custom-element>
定义的元素被插入到文档中时，connectedCallback() 方法会被调用。
在小程序中使用 Custom Elements
小程序不支持使用 HTMLElement，因此在小程序中使用 Custom Elements 需要借助第三方开源库 WeElement。WeElement 的原理是将自定义元素包装为一个小程序组件。
安装 WeElement：
npm i we-element
定义一个自定义元素：
-- -------------------- ---- -------
------ - --------- - ---- -------------
----- --------------- ------- --------- -
-------- -
------ -
----------- ------------
-
-
-
------------------------------------------ -----------------在小程序页面中使用自定义元素：
<my-custom-element></my-custom-element>
示例代码
-- -------------------- ---- -------
------ - --------- - ---- -------------
----- --------------- ------- --------- -
-------- -
------ -
----------- ------------
-
-
-
------------------------------------------ -----------------<my-custom-element></my-custom-element>
总结
在小程序中使用 Custom Elements 技术可以提高页面的可复用性和可维护性。通过使用 WeElement，可以方便地在小程序中使用自定义元素。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/654d84677d4982a6eb6e6f23