在 Custom Elements V0 和 V1 之间进行迁移的成功导航技巧-JavaScript中文网-JavaScript教程资源分享门户

前言

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 三个生命周期函数，各个回调的作用如下：

- `connectedCallback`：该元素被插入到文档时调用。
- `disconnectedCallback`：该元素被从文档中移除时调用。
- `attributeChangeCallback`：该元素的某个属性被增删改时调用。

自定义元素名称的约束发生了变化。

在 V0 中自定义元素的名称必须是一个以上格式“x-”开头的单词字符组成，但在自定义元素规范中，V1 拥有了更多自定义元素名称的限制。名称只能由这些字符组成：小写字母、数字和连字符（hyphen），并且必须是不区分大小写的。

Custom Elements V0 到 V1 的迁移

下面将介绍一些在 Custom Elements V0 到 V1 迁移过程中需要注意的事项，并提供对应的代码示例。

1. 从元素对象获取元素实例

在 V0 中，创建一个自定义元素后添加到文档中，可以使用如下代码获取该元素的实例：

document.querySelector('x-component');

在 V1 中，由于定义方式的不同，获取元素实例的方式也发生了变化。可以使用 window.customElements.get() 方法来获取自定义元素类：

window.customElements.get('x-component');

2. 替换 `createdCallback` 生命周期回调

在 V1 中，创建一个自定义元素时，将会调用 constructor 方法来执行创建逻辑。如果需要在元素被创建时执行某些逻辑，可以在 constructor 中执行。

class XComponent extends HTMLElement {
  constructor() {
    super(); // 创建 Shadow DOM
    console.log('元素被创建!');
  }
}

customElements.define('x-component', XComponent);

3. 替换 `detachedCallback` 生命周期回调

在 V1 中，使用 disconnectedCallback 生命周期回调来替换 detachedCallback。当自定义元素从父元素中移除时，disconnectedCallback 回调会被调用。下面是一个示例：

-- -------------------- ---- -------
----- ---------- ------- ----------- -
  ------------- -
    --------
  -

  ---------------------- -
    ----------------------
  -
-

------------------------------------ ------------

4. 替换属性的 HTML API

在 V1 中，如果需要向自定义元素中传递属性，需要使用 setAttribute() 方法，而不是使用 V0 中的 HTML API。

element.setAttribute('name', 'value');

5. 监听属性变化事件

在 V1 中新增了 attributeChangeCallback 生命周期回调，对应的监听属性变化方法也更新为 attributeChangedCallback, 并且还需要指定属性名称和旧值/新值：

-- -------------------- ---- -------
----- ---------- ------- ----------- -
  ------ --- -------------------- - ------ ------------------- -

  ------------------------------ --------- --------- -
     ----------------------------------------------------------
  -
-

------------------------------------ ------------

结论

上述是在 Custom Elements V0 和 V1 之间进行迁移的成功导航技巧。如果您的项目使用 V0 版本，那么在迁移到 V1 版本时需要注意上述变化。尽管这些改变可能会让迁移过程变得有些困难，但也为自定义元素提供了更多的灵活性和控制权。

参考资料：

示例代码

下面是完整的示例代码，您可以根据自己的需求修改。

-- -------------------- ---- -------
----- ---------- ------- ----------- -
  ------ --- -------------------- - ------ ------------------- -

  ------------- -
    --------
    ----------------------
  -

  ------------------- -
    --------------------------
  -

  ---------------------- -
    ----------------------
  -

  ------------------------------ --------- --------- -
     ----------------------------------------------------------
  -
-

------------------------------------ ------------

----- ------- - --------------------------------------
-----------------------------------

-------------------------------------- --------------
------------------------------------------

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/66f3e88ff40ec5a964e5ca38

在 Custom Elements V0 和 V1 之间进行迁移的成功导航技巧

前言