前言
Web Components 是 Web 开发中的一项新技术，它由三个主要规范组成：Custom Elements、Shadow DOM 和 HTML Templates。其中，Custom Elements 是根据开发者自定义的标签名创建、注册和使用的基础组件。
然而，Custom Elements 规范在一些浏览器中并不被完全支持，尤其是在旧版本的浏览器中。为了解决这个问题，开发者们提出了一种名为 “polyfill” 的技术，用于模拟浏览器在本来不支持某些特性的情况下仍能执行这些特性的能力。
本文将介绍什么是 Custom Elements 的 polyfill，以及如何在项目中使用它。
什么是 polyfill？
在介绍 Custom Elements 的 polyfill 之前，我们首先要了解什么是 polyfill。
Polyfill 是一种技术，它被用于实现浏览器在本来不支持某些特性的情况下仍能执行这些特性的能力。它通常是用一段 JavaScript 代码来实现的，这段代码可以被嵌入到你的项目中，以模拟缺失的特性。
Polyfill 的主要作用是允许你使用最新的 Web 技术，而不必考虑特定浏览器的支持情况。这样一来，你可以写出更加现代化、优雅的代码，同时又保证了项目在尽可能广泛的用户端使用的可用性。
什么是 Custom Elements？
Custom Elements 是 Web Components 规范的一个重要组成部分，它允许开发者创建自定义的 HTML 元素，并且能通过 JavaScript 注册这些元素。Custom Elements 允许开发者将其定义为常规 HTML 元素的扩展，并且可以重用代码。
Custom Elements 的 API 主要由以下两个方法组成：
customElements.define()：这个方法用来定义新的 Custom Element，并且返回一个新的 JavaScript 类。你需要调用这个方法来注册你自己的 Custom Element。customElements.get()：这个方法用来获取已经注册过的 Custom Element 的定义。
其中，定义 Custom Element 的 JavaScript 类的语法非常简单，只需要继承于 HTMLElement，并实现 connectedCallback() 和 disconnectedCallback() 这两个方法即可。
class MyElement extends HTMLElement {
connectedCallback() {
console.log('MyElement added to the DOM.');
}
disconnectedCallback() {
console.log('MyElement removed from the DOM.');
}
}为什么需要 Custom Elements 的 polyfill？
Custom Elements 由于是 Web Components 规范的一部分，因此目前并不被所有的浏览器兼容。在 IE 和 Edge 等浏览器中就不支持该规范。因此，如果你的代码中使用了 Custom Elements，那么你需要考虑使用 polyfill 技术来模拟其行为。
如何使用 Custom Elements 的 polyfill？
在项目中使用 Custom Elements 的 polyfill 相对来说比较简单。由于是用 JavaScript 实现的，因此你只需要像引入其它的 JavaScript 文件一样引入它即可。
在这里，我们向你推荐两款 Custom Elements 的 polyfill：
Polymer Project 的 polyfill ：一个由 Google 打造的优秀的 Web Components 框架。它提供了一种全面的 Web Components 实现，包括 Custom Elements。它包含了在不支持 Web Components 的浏览器中使用的所有功能插件，可以满足大多数 Web Components 需求。
HTML5 Rocks 的 polyfill ：另一个较为常见的 Custom Elements 的 polyfill，在 Web Componets 圈内广泛使用。它基于对 Custom Elements 规范的实现，支持现代浏览器和较老的浏览器。
在这里我们以 Polymer Project 的 polyfill 为例来介绍如何使用 Custom Elements 的 polyfill。
<!DOCTYPE html>
<html>
<head>
<title>使用 Custom Elements 的 polyfill</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.4.3/custom-elements-es5-adapter.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.4.3/custom-elements-es5-adapter.js"></script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=custom-elements"></script>
</head>
<body>
<my-element></my-element>
<script>
class MyElement extends HTMLElement {
connectedCallback() {
console.log('MyElement added to the DOM.');
}
disconnectedCallback() {
console.log('MyElement removed from the DOM.');
}
}
customElements.define('my-element', MyElement);
</script>
</body>
</html>在这个示例代码中，我们首先引入了 Polymer Project 的 polyfill，并定义了一个 Custom Element，其名称为 “my-element”。接着，我们在 <body> 标签中使用了 “my-element”，并在 JavaScript 中将这个 Custom Element 注册到了浏览器中。
当你在一个不支持 Custom Elements 规范的浏览器中运行这段代码的时候，它将会使用 polyfill 技术来模拟 Custom Elements 的行为。
总结
在这篇文章中，我们介绍了 Custom Elements 的 polyfill 技术，以及为什么你需要使用它。我们还介绍了如何在项目中使用 Custom Elements 的 polyfill，并提供了一个简单的示例代码。
使用 Custom Elements 的 polyfill 可以使你的代码更具备现代化和普适性。在项目中使用这个技术可以让你写出更加优秀的代码，同时又毫不减损客户端的使用体验。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/658fc3c6eb4cecbf2d5584a9