随着现代浏览器的不断发展，Web Components 成为前端开发中越来越重要的一部分。但是，IE11 作为一个老旧的浏览器，不支持 Web Components 标准，这对于开发人员是一个不小的问题。本篇文章将介绍如何让你的 Web Components 兼容 IE11，提供详细的指导和示例代码。
什么是 Web Components
Web Components 是一种用于创建可复用组件的浏览器技术，它包含四个主要的标准：
- Custom Elements：自定义元素的标准，用来扩展 HTML 元素。
- Shadow DOM：用于封装组件内部的 DOM 结构，避免样式和 DOM 冲突。
- HTML Templates：一个定义 HTML 模板的标准。
- HTML Imports：用于导入 HTML 文件的标准。
使用 Web Components 可以让开发人员更容易地构建可复用的 UI 组件，并且不需要依赖任何库或框架。
IE11 不支持 Web Components
不幸的是，IE11 并不支持 Web Components 标准。这是因为 Custom Elements 和 Shadow DOM 都是较新的标准，IE11 并没有对它们进行完全的支持。HTML Imports 标准已被废弃，因此不再被 IE11 所支持。
让 Web Components 兼容 IE11
为了让我们的 Web Components 兼容 IE11，我们需要使用 Polyfills。Polyfill 是一种代码，它可以使用现代浏览器支持的 Web Components 标准来实现在 IE11 中不支持的功能。
在使用 Polyfills 之前，我们需要明确两个点：
- 使用 Polyfills 会增加额外的代码和网络请求。确保您的应用程序可以承受这些成本。
- 在别无选择的情况下才使用 Polyfills，不要因为想要支持老旧浏览器而损失现代浏览器的性能优化等好处。
恰当地使用 Polyfills 可以让我们的 Web Components 在现代浏览器和 IE11 中都能正常工作。
使用 Polyfills 实现 Custom Elements
Polyfills 通常由社区提供，比如 webcomponents/custom-elements 这个仓库就提供了 Custom Elements 的 Polyfills 实现。
要使用 Custom Elements Polyfills，我们需要先加载它们：
<head> <script src="https://unpkg.com/@webcomponents/custom-elements@1.0.0-beta.7/bundles/custom-elements.js"></script> <script src="components.js"></script> </head>
我们还需要定义我们自己的 Custom Elements：
-- -------------------- ---- -------
----- -------- ------- ----------- -
------------- -
--------
-- - ----------- --------
------------------- ----- ------ ---
----- ------ - ---------------------------------
------------------ - ---------------------------
-- ---- --- ----- ------ --- -
------------------------------------
------------------------------ ------------------
-
----------- - -- -- -
-- ------
-
-
---------------------------------- ----------上面的代码定义了一个叫做 my-button 的 Custom Element，它有一个 label 属性和一个点击事件处理函数。
现在，我们已经使用 Custom Elements 来实现了一个自定义的 UI 组件，这个组件甚至可以在 IE11 中正常工作！
使用 Polyfills 实现 Shadow DOM
Shadow DOM Polyfills 的实现主要是由 Polymer 团队提供的。与 Custom Elements Polyfills 类似，我们需要先加载它们：
<head> <script src="https://unpkg.com/@webcomponents/shadydom@1.0.0-beta.7/shadydom.min.js"></script> <script src="https://unpkg.com/@webcomponents/shadycss@1.0.0-beta.7/shadycss.min.js"></script> <script src="components.js"></script> </head>
我们需要在我们自己的 Custom Element 定义中加入 Shadow DOM 的支持：
-- -------------------- ---- -------
----- -------- ------- ----------- -
------------- -
--------
-- - ----------- --------
------------------- ----- ------ ---
-- ---- --- ----- ------ --- -
----- -------- - -----------------------------------
------------------ - -
-------
------ -
---------- -----
-------- --- -----
------- -----
-------------- ----
----------------- -----
------ -----
-
--------
----------------------------------------------
--
--------------------------------------------------------------
------------------------------ ------------------
-
----------- - -- -- -
-- ------
-
-
---------------------------------- ----------上面的代码中，我们在 Shadow DOM 中封装了样式和 DOM 结构。
使用 Polyfills 实现 HTML Templates
HTML Templates Polyfills 的实现也是由 Polymer 团队提供的。我们可以通过调用 content.cloneNode(true) 方法将模板添加到 Shadow DOM 中：
-- -------------------- ---- -------
----- -------- ------- ----------- -
------------- -
--------
----- -------- - -----------------------------------
------------------ - -
-------
------ -
---------- -----
-------- --- -----
------- -----
-------------- ----
----------------- -----
------ -----
-
--------
----------------------------------------------
--
------------------- ----- ------ ---
--------------------------------------------------------------
-
-使用 Polyfills 实现 HTML Imports
HTML Imports 已经被废弃，因此我们不再提供使用它的 Polyfills。
Polyfills 的性能成本
使用 Polyfills 会增加额外的代码和网络请求，因此它会对性能造成一定的影响。在考虑使用 Polyfills 时，我们需要考虑到这一点，确保应用在 IE11 中的运行速度能达到可接受的水平。
结论
虽然 IE11 不支持 Web Components 标准，但使用 Polyfills 可以让我们的组件在 IE11 中正常工作。在使用 Polyfills 时，我们需要考虑到他们增加的代码和网络请求，且不要过度依赖它们。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6732b6e50bc820c5823e7682