在不支持自定义元素的浏览器中使用 Polyfill 实现兼容性
在现代 Web 开发中，自定义元素是一个非常好用的概念，它可以让开发者自定义 HTML 元素，从而实现更好的组件化和可重用性。但是，自定义元素并不是所有浏览器都支持的，特别是老版本的浏览器。本篇文章主要介绍如何使用 Polyfill 实现自定义元素在不支持的浏览器中的兼容性。
Polyfill 是一种增强浏览器功能的JavaScript技术。它通过 JavaScript 代码在浏览器中模拟对新技术支持，从而解决了跨浏览器兼容问题。 这个问题在自定义元素的场景中尤其棘手。
首先，我们需要了解两个重要概念：
- Custom Elements： W3C 标准中关于自定义元素的规范
- Shadow DOM：一种基于封装、隔离和扩展 DOM 的机制，用于构建 Web 组件
Polyfill 方案主要涉及实现这两个规范。
多种方案
由于不支持 custom elements 的浏览器会视自定义元素为未知元素，即无法被解析。为了解决这个问题，Polyfill 方案主要分为两种：
- 解析未知元素，模拟 Custom Elements
这个方案需要具体到每个自定义元素，解析未知元素，并通过 JavaScript 代码实现自定义元素相应的功能。这样做的好处是可以更好地模拟原生自定义元素，但是需要对每个元素分别进行处理，需要的代码会增多。两个非常流行的解决方案分别是 document-register-element 和 Polymer.js。
document-register-element 是由 WebComponents 社区提供的解决方案，它通过动态的创建元素、继承和扩展原生元素来实现，可实现比较多的高级功能、包括 Autonaming、LifecyclE方法、继承等。同时，它也提供 ShadyDOM 能力，可以使得 Custom Element 更加完整。这个库的代码虽然相对较少，但默认不能支持 Shadow DOM，同时其父元素上也不能使用 ::cue 样式选择器。
-- -------------------- ---- -------
---- ---- ---
------- ------------------- -----------
------- ----------------------------------------------------------------------------------------------
--------
--- ------- - ------------------------------------ -
---------- ------------------------------------------ -
---------------- -
------ -------- -- -
--- ------ - ------------------------
---------------- - ------ ------ -----
-
-
--
---
---------Polymer.js 是由谷歌团队推出的一个 Web 组件库，它对 Custom Elements 和 Shadow DOM 进行了封装，并在其基础上增强了 Web 组件的功能，比如数据绑定、模板、辅助方法等等。这个库较为庞大，使用起来相对更加复杂。
-- -------------------- ---- -------
---- ---- ---
----- ------------ ----------------------------------------------------
----------- --------------
----------
-------------- -- ---- -----------
-----------
--------
---------
--- -----------
----------- -
----- ------
-
---
---------
-------------
--------- ----------------------- 使用 HTML5 Shiv 或其它类似的解决方案——直接在 DOM 上创建所有未知元素
除了第一种方案，第二种方案则是通过在 DOM 上直接创建所有未知元素，从而达到编译Custom Elements的效果。这种方式可以支持Shadow DOM但是性能相对较低。适合的场景是，在多个独立的控件的组成的时候，不需要支持 Shadow DOM，有不少的人就选择了这种方案(例如 SonicJS)。
<!-- 示例代码 -->
<script src="https://cdn.bootcss.com/html5shiv/r29/html5shiv.min.js"></script>
<script>
document.createElement('x-button');
document.createElement('x-dropdown');
</script>结论
在不支持自定义元素的浏览器中通过以上两种方案可以实现一定程度的兼容。但这里重点介绍了 第一种方案：解析未知元素，模拟 Custom Elements 所涉及的两个库 document-register-element 和 Polymer.js。这个方案相对于第二种方案，速度较快，模拟得相对更加完好。
需要注意的是，Polyfill 本身带来的额外代码和 CSS 都会带来一定的性能制约，所以最好还是在浏览器本身支持自定义元素的情况下使用。不过，在解决兼容性问题时，Polyfill 是不错的选择。
希望这篇文章可以帮助你解决自定义元素在旧浏览器中的兼容性问题，也希望你能在实际项目中应用Polyfill技术，从而避免浏览器兼容性所带来的困扰。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671b42469babaf620faa6218