前言
Web Components 是一种组成 Web 应用的模块化组件的标准，在前端开发中逐渐被普遍采用。尽管 Web Components 提供了更灵活的组件化方案，但是在 Safari iOS 浏览器中，Web Components 组件会出现无法正确显示的问题。这篇文章就是为了解决这个问题而写的。
问题分析
在 Safari iOS 浏览器中，Web Components 组件的问题主要是由以下两个因素造成的：
- Safari iOS 不支持自定义元素。
- Safari iOS 不支持 ES6 的自定义元素。
对于自定义元素不被支持的问题，我们可以采用 polyfill 的方式进行解决；而对于 ES6 的自定义元素不被支持的问题，则需要对 Web Components 组件的类进行处理。
解决方案
自定义元素的 polyfill
有很多关于自定义元素的 polyfill 工具，我们在这里介绍一下比较流行的两个工具：Polymer 和 document-register-element。
Polymer
Polymer 是谷歌开发的 Web Components 组件库，也是目前使用最广泛的 Web Components 组件库之一。它提供了一套完整的 Web Components 组件开发工具，并且自带了自定义元素的 polyfill。
安装 Polymer：
$ npm install polymer-cli -g
使用 Polymer：
-- -------------------- ---- -------
--------- -----
------
------
------------ -------------
------- --------------------------------------------------------------------------
----- ------------ ---------------------------------
-------
------
---------------------------
-------
-------在这个例子中，我们使用了 Polymer 组件库以及自带的自定义元素 polyfill。当我们在 Safari iOS 浏览器中运行这段代码时，Web Components 组件就可以正确显示并且正常使用了。
document-register-element
document-register-element 是另外一个比较流行的自定义元素 polyfill 工具，它提供了一种比较简单的方法来实现自定义元素的支持。我们来看一下示例：
-- -------------------- ---- -------
--------- -----
------
------
------------ -------------
------- ------------------------------------------------------------------------------------------------------------------------
-------
------
---------------------------
--------
--- ---------- - --------------------------------------- -
---------- ------------------------------------ -
---------------- -
------ ---------- -
--- ---------- - ------------------------
-------------------- - ---------- ------------
-
-
--
---
---------
-------
-------在这个例子中，我们通过 document.registerElement() 方法来注册一个自定义元素，并且定义了这个元素的渲染方式和行为。当我们在 Safari iOS 浏览器中运行这段代码时，Web Components 组件就可以正确显示并且正常使用了。
ES6 的自定义元素转换
对于 ES6 的自定义元素不被支持的问题，我们可以采用 babel-plugin-transform-custom-element-classes 这个 Babel 插件进行解决。它可以将 ES6 的自定义元素转换成 ES5 的自定义元素，从而实现在 Safari iOS 浏览器中正确显示 Web Components 组件的效果。
安装 babel-plugin-transform-custom-element-classes：
$ npm install babel-plugin-transform-custom-element-classes --save-dev
使用 babel-plugin-transform-custom-element-classes：
-- -------------------- ---- -------
-- --------
-
---------- -
------------------------------------ -
---------------- ----------------- -- ---------
---------- ------------- -- --------
--
-
-在这个例子中，我们使用了 babel-plugin-transform-custom-element-classes 插件，并且定义了 Web Components 组件用到的自定义元素标签名和基类。当我们在 Safari iOS 浏览器中运行这段代码时，Web Components 组件就可以正确显示并且正常使用了。
总结
本文主要讲解了在 Safari iOS 中解决 Web Components 组件无法正确显示的问题，并且提供了 polyfill 和 Babel 插件解决方案。在实际的开发中，可以根据自己的需求选择适合的方案来解决此问题。代码示例请参见下面。
示例代码
https://github.com/OpenAssistant/webcomponents-ios-problem
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65b3439aadd4f0e0ffc53878