Custom Elements 是 Web Components 中的一个重要技术，可以让我们创建出具有自定义行为的 HTML 元素。但当我们需要使用它来处理先于组件实例化的扩展元素时，可能会遇到些问题。
什么是先于组件实例化的扩展元素？
先于组件实例化的扩展元素，指的是不在组件生命周期控制之下，而是在页面加载时就已经存在的元素。这些元素可能是由后端生成渲染而成的，也可能是使用脚本动态创建的。无论哪种情况，我们都需要处理这些元素，以使它们具有 Custom Elements 所定义的行为。
如何处理先于组件实例化的扩展元素？
处理这些元素的过程包括以下两个阶段：
1. 注册扩展元素
我们需要先注册这些元素，使其可以被 Custom Elements 所识别，并且具有所定义的行为。方法如下：
-- -------------------- ---- ------- ----- ----------- ------- ----------- - -- ------ - -- ---- ------------------------------------- ------------- -- ------ ----- ----- - --------------------------------------- -- ------ ------------------------------
这里我们需要注意，customElements.upgrade() 方法只会对已经定义了的 Custom Elements 进行升级，对于未定义的元素，则不会产生任何效果。
2. 实例化扩展元素
注册完成后，我们需要将扩展元素实例化为对应的组件实例，以便能够对其进行操作。方法如下：
-- -------------------- ---- ------- ----- ----- - --------------------------------------- -- ----------- ----- ----------- - ------------------------------------------------ -- ------- ----- -------- - --- -------------- -- --- --- - --------------------------------------- ------- -- ------ -----------------------
在这里，我们通过 get() 方法获取扩展元素的构造函数，然后实例化出对应的组件实例，并最终将其挂载到 DOM 上。
示例代码
为了更好地理解上述过程，下面提供一组示例代码：
HTML：
<div class="ext-element">扩展元素</div> <my-component></my-component>
JavaScript：
-- -------------------- ---- -------
----- ----------- ------- ----------- -
------------- -
--------
---------------------
-
------------- -
--------------------
-
-
-- ----
------------------------------------- -------------
-- ------
----- ----- - ---------------------------------------
-- ------
------------------------------
-- -----------
----- ----------- - ------------------------------------------------
-- -------
----- -------- - --- --------------
-- --- --- -
--------------------------------------- -------
-- ------
-----------------------运行上述代码后，我们将会看到如下输出：
组件实例化 组件执行
总结
Custom Elements 帮助我们创建出自定义行为的 HTML 元素，但处理先于组件实例化的扩展元素时需要格外注意。我们需要先注册这些元素，并实例化为对应的组件实例，以便进行后续操作。使用上述方法可以很好地解决这个问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e09c01f6b2d6eab3bb9e0c
