Web Components 可以让我们创建可复用的自定义元素，Custom Elements 是其中一个 API。Custom Elements 的 v1 版本与 v0 版本有所不同，本文将详细介绍从 v0 迁移到 v1 的过程以及如何实现向下兼容。
介绍
Custom Elements 是 Web Components API 的一部分，它允许开发者定义自己的 HTML 元素，并为这些元素添加自定义的行为，例如自定义事件和属性。像 <video> 等内置元素一样使用自定义元素。Web Components 也是构建可组合和可重用 Web 应用程序的理想工具。
Custom Elements 有两个版本，v0 和 v1。虽然 v0 没有正式成为浏览器 API，但它已广泛应用于许多项目中。Custom Elements v1 是一个 W3C 标准（规范），它在设计上更加精简和高效，并支持更多的功能。
Custom Elements v0
在 Custom Elements v0 中，我们需要创建一个继承自“HTMLElement”的构造函数，并将其注册到文档。然后，我们可以使用自定义元素的名称将其添加到文档中。代码如下所示：
var MyElement = Object.create(HTMLElement.prototype); MyElement.createdCallback = function() { // Custom element created. }; document.registerElement('my-element', { prototype: MyElement });
在上面的例子中，MyElement 继承了 HTMLElement，并在 createdCallback 方法中添加了自定义代码。然后，使用 document.registerElement 方法将其注册到自定义元素 my-element 中。
可以使用自定义元素的名称将其添加到文档中：
<my-element></my-element>Custom Elements v1
Custom Elements v1 更加直观和精简。在 v1 中，我们可以使用自定义元素类来创建一个新元素。代码如下所示：
class MyElement extends HTMLElement { constructor() { super(); // Custom element created. } } customElements.define('my-element', MyElement);
在上面的例子中，MyElement 类继承了 HTMLElement，并在 constructor 方法中添加了自定义代码。然后，使用 customElements.define 方法将其注册到自定义元素 my-element 中。
可以使用自定义元素的名称将其添加到文档中：
<my-element></my-element>向下兼容
当迁移到 Custom Elements v1 时，我们需要考虑如何与页面上已经存在的 Custom Elements v0 元素一起使用。有两种方法可用于实现向下兼容。
方案 1：检查自定义元素的存在
我们可以检查当前环境是否支持 Custom Elements v1，然后根据条件选择使用 v0 或 v1 的代码。代码如下所示：
-- -------------------- ---- ------- -- ----------------- -- ------- - -- ------ -------- -- ----- ----- --------- ------- ----------- - ------------- - -------- -- ------ ------- -------- - - ----------------------------------- ----------- - ---- - -- ------ -------- -- ----- --- --------- - ------------------------------------- ------------------------- - ---------- - -- ------ ------- -------- -- -------------------------------------- - ---------- --------- --- -展开代码
在上面的例子中，使用 if ('customElements' in window) 检查当前环境是否支持 Custom Elements v1。如果支持，则使用 Custom Elements v1 的代码创建自定义元素。否则，使用 Custom Elements v0 的代码创建自定义元素。
方案 2：Polyfill
另一个方法是使用 Custom Elements v1 的 Polyfill。Polyfill 是一段 JavaScript 代码，它可以实现 Web 平台 API 的浏览器扩展或填充器。Custom Elements v1 的 Polyfill 可以在不支持此 API 的浏览器中使用它。使用 Polyfill 可以将 v1 的写法直接使用，如下所示：
-- -------------------- ---- ------- ----- --------- ------- ----------- - ------------- - -------- -- ------ ------- -------- - - -- ------------------------ - ----------------------- ------------------------------------------------------------------------------------- - ----------------------------------- -----------展开代码
上面的代码首先定义了一个 MyElement 类，如果当前环境不支持 Custom Elements v1，则加载 Polyfill，然后使用 customElements.define 方法将其注册到自定义元素 my-element 中。
总结
Custom Elements v1 是 Web Components API 的一个最近开发的版本，与 Custom Elements v0 相比，它更加精简和高效，并支持更多功能。在迁移 Custom Elements v1 时，我们需要考虑如何与页面上已经存在的 Custom Elements v0 元素一起使用，可以使用条件加载或 Polyfill 实现向下兼容。Custom Elements v1 将带来更加直观和优雅的代码实现，有助于我们构建更加可组合和可重用的 Web 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648e792648841e9894cd5b41
