前言
Custom Elements 是 Web Components API 的一部分，可以让开发者自定义 HTML 元素，并且能够被浏览器识别和使用。Custom Elements 在 V0 和 V1 版本之间有一些不兼容的改动，对于已经使用 V0 版本的开发者来说，进行迁移可能会遇到一些挑战。本文将提供一些成功导航的技巧，帮助开发者顺利地将 Custom Elements 从 V0 版本迁移到 V1 版本。
Custom Elements V0 和 V1 的不同
Custom Elements V1 在 V0 的基础上进行了一些扩展和改进，其中包括：
- 构造函数和方法有变化。
在 V1 中，定义 Custom Element 的方式有所变化。V1 中使用 class 来定义一个自定义元素，而不是像 V0 中使用 document.registerElement 方法。V1 使用 constructor 方法来定义自定义元素的构造函数，并且可以使用 connectedCallback 和 disconnectedCallback 方法分别在元素被添加到文档和从文档中删除时执行。
- 生命周期回调发生了变化。
在 V0 中，只有 createdCallback 和 detachedCallback 生命周期回调。但在 V1 中，新增了 connectedCallback, disconnectedCallback, attributeChangeCallback 三个生命周期函数，各个回调的作用如下：
- --------------------------------- - ------------------------------------- - ------------------------------------------
- 自定义元素名称的约束发生了变化。
在 V0 中自定义元素的名称必须是一个以上格式“x-”开头的单词字符组成，但在自定义元素规范中，V1 拥有了更多自定义元素名称的限制。名称只能由 这些字符组成：小写字母、数字和连字符（hyphen），并且必须是不区分大小写的。
Custom Elements V0 到 V1 的迁移
下面将介绍一些在 Custom Elements V0 到 V1 迁移过程中需要注意的事项，并提供对应的代码示例。
1. 从元素对象获取元素实例
在 V0 中，创建一个自定义元素后添加到文档中，可以使用如下代码获取该元素的实例：
--------------------------------------
在 V1 中，由于定义方式的不同，获取元素实例的方式也发生了变化。可以使用 window.customElements.get() 方法来获取自定义元素类：
-----------------------------------------
2. 替换 createdCallback 生命周期回调
在 V1 中，创建一个自定义元素时，将会调用 constructor 方法来执行创建逻辑。如果需要在元素被创建时执行某些逻辑，可以在 constructor 中执行。
----- ---------- ------- ----------- -
------------- -
-------- -- -- ------ ---
----------------------
-
-
------------------------------------ ------------3. 替换 detachedCallback 生命周期回调
在 V1 中，使用 disconnectedCallback 生命周期回调来替换 detachedCallback。当自定义元素从父元素中移除时，disconnectedCallback 回调会被调用。下面是一个示例：
----- ---------- ------- ----------- -
------------- -
--------
-
---------------------- -
----------------------
-
-
------------------------------------ ------------4. 替换属性的 HTML API
在 V1 中，如果需要向自定义元素中传递属性，需要使用 setAttribute() 方法，而不是使用 V0 中的 HTML API。
---------------------------- ---------
5. 监听属性变化事件
在 V1 中新增了 attributeChangeCallback 生命周期回调，对应的监听属性变化方法也更新为 attributeChangedCallback, 并且还需要指定属性名称和旧值/新值：
----- ---------- ------- ----------- -
------ --- -------------------- - ------ ------------------- -
------------------------------ --------- --------- -
----------------------------------------------------------
-
-
------------------------------------ ------------结论
上述是在 Custom Elements V0 和 V1 之间进行迁移的成功导航技巧。如果您的项目使用 V0 版本，那么在迁移到 V1 版本时需要注意上述变化。尽管这些改变可能会让迁移过程变得有些困难，但也为自定义元素提供了更多的灵活性和控制权。
参考资料：
示例代码
下面是完整的示例代码，您可以根据自己的需求修改。
----- ---------- ------- ----------- -
------ --- -------------------- - ------ ------------------- -
------------- -
--------
----------------------
-
------------------- -
--------------------------
-
---------------------- -
----------------------
-
------------------------------ --------- --------- -
----------------------------------------------------------
-
-
------------------------------------ ------------
----- ------- - --------------------------------------
-----------------------------------
-------------------------------------- --------------
------------------------------------------来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/66f3e88ff40ec5a964e5ca38