前言
Custom Elements 是 Web Components 中的一种实现方式，可以让开发者自定义 HTML 元素，扩展出更丰富的标签来使用。然而，IE 浏览器并不支持 Custom Elements，这给前端开发带来了不小的挑战。本文将介绍如何解决 IE 浏览器不支持 Custom Elements 的问题。
什么是 Custom Elements
Custom Elements 是 Web Components 规范的一部分，它定义了一种可以自定义 HTML 元素的方式，让开发者可以按照自己的需求扩展出全新的 HTML 标签。使用 Custom Elements 可以更方便地构建 Web Components，使得组件化开发更容易。
下面是一个简单的 Custom Elements 示例，创建一个名为 my-element 的自定义元素，当该元素被插入到文档中时，会在控制台输出一句话：
-- -------------------- ---- -------
-------------------------
--------
----- --------- ------- ----------- -
------------- -
--------
----------------------- -- -----------
-
-
----------------------------------- -----------
---------IE 浏览器不支持 Custom Elements 的问题
虽然现代浏览器都已经支持 Custom Elements，然而在 IE 浏览器中是不被支持的。因为 IE 浏览器不支持 ES6 中的 class，并且不支持 customElements API。
解决 IE 浏览器不支持 Custom Elements 的方法
为了解决 IE 浏览器不支持 Custom Elements 的问题，我们可以使用以下两种方法：
1. 使用 polyfill
polyfill 可以使得现代浏览器的特性在老旧浏览器上得到支持。对于 Custom Elements，我们可以使用 webcomponentsjs 这个 polyfill，它提供了完整的 Web Components 支持，包括 Custom Elements。
在项目中引入 webcomponentsjs，并且在页面加载时进行 polyfill：
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.2.10/webcomponents-bundle.js"></script>
<script>
window.onload = function() {
if(!window.customElements) {
document.write('<script src="path/to/webcomponentsjs.js"><' + '/script>');
}
};
</script>2. 使用 ES5 来编写 Custom Elements
虽然 IE 浏览器不支持 ES6 class，但是它支持 ES5 的原型继承。我们可以用 ES5 的方式来实现 Custom Elements，从而保证 IE 浏览器的兼容性。
以下是一个利用 ES5 实现 Custom Elements 的示例：
-- -------------------- ---- -------
-------------------------
--------
--- --------- - ---------- -
--- ---- - ---- ---------- --------- - ---- - -----------------------------------
-- ----
--- ------ - ------------------------ ---------
--- --- - ------------------------------
------------- - ------- --------
------------------------
------ -----
--
------------------- - -------------------------------------
------------------------------- - ----------
------------------------------------------ -----------
---------总结
通过以上两种方法，我们可以解决 IE 浏览器不支持 Custom Elements 的问题。如果我们希望保证代码的易读性和可维护性，建议使用 polyfill 来进行解决。如果我们希望实现 ES5 的兼容性，在代码设计时需要充分考虑它的特性和限制。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c5eda395c405902ee40d62