随着 Web 技术的不断发展，前端开发中使用自定义元素的需求越来越大。但是，原生的 customElements API 在某些浏览器上仍然存在兼容性问题。幸运的是，有许多第三方库和工具可以帮助我们解决这个问题。其中一个很好的选择是 document-register-element。
简介
document-register-element 是一个小巧的 JavaScript 库，用于在不支持原生 customElements API 的浏览器上注册自定义元素。它为我们提供了一个类似于原生 API 的接口，使得我们可以方便地创建、注册、升级和删除自定义元素。
安装
你可以通过 npm 来安装 document-register-element：
--- ------- ------------------------- ------
或者通过 CDN 引入：
------- ----------------------------------------------------------------------
使用
创建自定义元素
要创建一个自定义元素，你需要调用 document.registerElement() 函数，并传递三个参数：
name: 自定义元素的名称，必须包含一个短横线。options: 自定义元素的选项，包括prototype和extends属性。callback: 当自定义元素被注册时，会调用回调函数。
下面是一个简单的例子，创建了一个名为 my-element 的自定义元素：
-------------------------------------- - ---------- ------------------------------------ ---
注册自定义元素
一旦你创建了自定义元素，你需要将其注册到文档中。你可以在任何时候进行注册，但最好是在文档加载完成后立即注册。
--------------------------------------------- ---------- -
-------------------------------------- -
---------- ------------------------------------
---
---自定义元素选项
除了 prototype 属性之外，options 对象还可以包含另一个属性 extends，用于指定自定义元素继承的原生 HTML 元素。例如，如果你想创建一个 button 元素的子类，可以这样做：
------------------------------------- - -------- --------- ---------- ------------------------------------------ ---
升级自定义元素
当你需要更新自定义元素的行为或样式时，可以使用 document.upgradeElements() 函数。这个函数会遍历文档中所有自定义元素实例，并检查它们是否需要升级。
--------------------------------------------- ---------- -
-------------------------------------- -
---------- ------------------------------------
---
-- -- - ----------
--------------------- -
---------------------------
-- ------
---删除自定义元素
如果你想删除一个已经注册的自定义元素，可以使用 document.unregisterElement() 函数。这个函数接受一个参数，即要删除的自定义元素的名称。
-----------------------------------------
示例代码
下面是一个完整的示例代码，展示了如何使用 document-register-element 创建和注册自定义元素：
--------- -----
------
------
--------- ------ ---------------
-------
------
-------------------------
------- ----------------------------------------------------------------------
--------
-- -------
-------------------------------------- -
---------- ------------------------------------ -
---------------- -
------ ---------- -
---------------- - ------- --------
-
-
--
---
-- -------
--------------------------------------------- ---------- -
----------------------------------------------------------- ----------
---------------------------------------------------------------------------------------