Ionic4相容IE瀏覽器處理

在一般場合，Ionic4執行在手機端，沒必要去相容IE，但還是可以瞭解一下，以免有這樣的需求。
Ionic4，它更趨向於一個UI框架，然後可配套Angular、React、Vue等框架使用。以Angular版本為例，相容IE瀏覽器，主要是JS+CSS的語法和用法的調整處理。

1. JS，可以使用內建的Polyfill方案。

Angular專案預設提供了Polyfill支援，開啟Ionic4專案中的src目錄，裡面有自動生成的polyfill.ts檔案，開啟可以看到這樣的內容：

/***************************************************************************************************
 * BROWSER POLYFILLS
 */

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';

/** IE10 and IE11 requires the following for NgClass support on SVG elements */
import 'classlist.js';  // Run `npm install --save classlist.js`.

/** IE10 and IE11 requires the following for the Reflect API. */
import 'core-js/es6/reflect';

/** Evergreen browsers require these. **/
// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
import 'core-js/es7/reflect';

為了減輕打包的大小，預設上面的import都是註釋掉的，這裡要相容IE，自然把它們開啟，我覺得註釋說明得很清楚，跟著做就好了。

重新編譯執行，可以看到原來在IE瀏覽器提示指令碼錯誤的都消失了，頁面能正常執行，只是樣式可能會有點變形。

2. CSS自定義樣式調整

Ionic4大量使用了shawdow-dom，IE瀏覽器不解析#shadow-root，但會解析其下內容，所以Dom都會存在，只是樣式可能會不同。系統內建樣式基本是做了相容處理的，而自定義樣式放在全域性和區域性都會存在不一樣的相容效果，可以做下相容性調整，如：

    --background: transparent;
    background-color: transparent;  // 相容性後備處理