Custom Elements（自定义元素）是 Web Components 的一部分，它允许开发者创建自己的 HTML 标签并为其添加行为。然而，Custom Elements 在一些旧版浏览器中并不被支持，这就需要使用 Polyfill 技术来让 Custom Elements 生效。
什么是 Polyfill？
Polyfill 是一个 JavaScript 库，它允许开发者在旧版浏览器中实现新的 Web 技术。Polyfill 能够将不支持的 API 转换成当前浏览器所能支持的等效 API。
Polyfill 的工作原理是利用特性检测和条件语句，在不同的环境下应用不同的代码，从而实现兼容性。
如何使用 Polyfill 实现 Custom Elements？
在使用 Polyfill 实现 Custom Elements 之前，我们需要先选择一个合适的 Polyfill 库。目前比较流行的 Polyfill 库有：
- Polymer：Google 推出的 Web 组件库，内置了 Custom Elements Polyfill。
- Web Components Polyfill：由一组开发者维护的 Polyfill 库，支持 Custom Elements、Shadow DOM、HTML Imports 等 API。
以下将以 Polymer 为例，演示如何使用 Polyfill 实现 Custom Elements。
步骤一：导入 Polyfill 库
在 HTML 头部的 <head> 标签中，添加以下代码导入 Polymer 库以及其内置的 Custom Elements Polyfill。
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script> <script src="https://unpkg.com/@webcomponents/webcomponentsjs"></script>
步骤二：定义 Custom Element
在 JavaScript 文件中，使用 ES6 的 class 语法定义 Custom Element，例如：
class MyElement extends HTMLElement {
constructor() {
super();
console.log('MyElement created.');
}
}步骤三：注册 Custom Element
在 JavaScript 文件中，使用 customElements.define() 方法注册 Custom Element，例如：
customElements.define('my-element', MyElement);以上代码将会把 MyElement 类注册成一个名为 my-element 的 Custom Element。
步骤四：使用 Custom Element
在 HTML 文件中，使用自定义标签 <my-element> 引用自定义元素，例如：
<my-element></my-element>
以上代码将会创建一个 MyElement 的实例，并在控制台输出 'MyElement created.'。
结论
使用 Polyfill 技术可以让开发者在旧版浏览器中实现新的 Web 技术，例如 Custom Elements。选择合适的 Polyfill 库、定义 Custom Element 类、注册 Custom Element 标签三个步骤，即可让 Custom Elements 在旧版浏览器中生效。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67149d50ad1e889fe214ae0b