Custom Elements 是一项 Web 标准，它允许开发者自定义 HTML 标记并在页面中使用它们。但是，Custom Elements 在旧版浏览器中可能不受支持，这时候，我们可以使用一个叫做“fallback”的技术来提供支持。
本文将介绍 ES5 中如何为 Custom Elements 提供 fallback，并给出示例代码。阅读本文后，你将会学会如何通过 fallback 技术让你的 Custom Elements 在旧版浏览器中也能正常工作。
为什么要使用 fallback
Custom Elements 在现代浏览器中已经被支持了。但是，一些早期版本的浏览器可能无法正确地解析自定义元素，这时候就需要使用一个叫做“fallback”（回退）技术。
fallback 技术指的是，当浏览器不支持某个功能时，我们可以通过一些技巧手段（通常是 JavaScript 代码）来模拟实现该功能，从而在不支持该功能的浏览器中也能正常工作。
为了让用户在任何浏览器上都能正常使用我们的网站，我们需要提供一个 fallback 机制，这样就可以保证所有的用户都能有一致的体验。
如何为 Custom Elements 提供 fallback
首先，我们需要明确一点：如果浏览器支持 ES6 或者 ES7，那么它也应该支持 Custom Elements，因为 Custom Elements 是这些 ECMAScript 版本的一部分。
但是，如果某个浏览器不支持 Custom Elements，我们可以通过 Polyfill 或者叫做“垫片”的技术来提供 fallback 支持。
Polyfill 是一个 JavaScript 库，它可以让浏览器支持某些功能（比如 Custom Elements）的语法和 API，即使浏览器本身没有在内置这些功能。
在网上搜索“Custom Elements Polyfill”，你会找到很多 Polyfill 库。其中最常见的一个是“webcomponents.js”，它是 Google 开发的一个 Polyfill 库。
我们可以将 webcomponents.js 作为一个 script 标签引用到我们的项目中，并在需要使用 Custom Elements 的地方调用它。这样，在不支持 Custom Elements 的浏览器中，Polyfill 就会自动模拟实现这些功能，从而让我们的代码在旧版浏览器中也能正常工作。
下面是引用 webcomponents.js 的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- -------- ------------
------- ------------------------------------------------------------------------------------------------------
-------
------
-------------------------
--------
-- -- ------------------- -------- --
-------------------- - -------------------- -- ---
----------------------------- - - ------ ---- --
----------------------------- - - ------------- ---- --
-------------------------- - -----
---------
-------
-------总结
在本文中，我们介绍了如何为 Custom Elements 提供 ES5 中的 fallback。如果你需要让你的 Custom Elements 在旧版浏览器中也能正常工作，那么你可以使用 webcomponents.js 这个 Polyfill 库来提供 fallback 支持。
fallback 技术是 Web 开发中非常实用的技巧之一，它可以让我们的网站在任何浏览器上都能正常工作。希望本文能够帮助你了解 Custom Elements 和 fallback 技术，从而让你的 Web 开发更加顺畅。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648aff3c48841e989495f9e1