在 IE11 中使用 `ViewEncapsulation.ShadowDom work` 执行 Angular Elements答案

【问题标题】：Do Angular Elements with `ViewEncapsulation.ShadowDom work` in IE11在 IE11 中使用 `ViewEncapsulation.ShadowDom work` 执行 Angular Elements
【发布时间】：2020-03-20 16:48:49
【问题描述】：

当视图封装设置为ShadowDom 时，Angular Elements 是否能够创建可以在 IE11 中运行的 Web 组件？是否需要手动添加 polyfill？

文档建议您只需要ng add @angular/elements 并在 ES2015 和 ES5 中编译项目。 https://angular.io/guide/elements#browser-support-for-custom-elements

我已经在 Angular 9 中尝试过，但它无法在 IE11 中加载。

我可以使用 https://www.webcomponents.org/polyfills 在 IE11 中加载标准 Web 组件按理说，如果 Angular 正在生成一个真正的自定义元素，它也应该能够工作。

有没有人可以使用 Angular Element、ShadowDOM、IE11 版本，或者只是不可能。

感谢您的帮助

【问题讨论】：

标签： angular internet-explorer-11 web-component

【解决方案1】：

~~由于 Internet Explorer 不支持 ECMAScript 2015 (ES6)，首先我们需要配置 Angular 9 应用程序以 ES5 模式构建。然后，为 Angular Elements 安装 polyfill。~~

请参考以下步骤：

在 tsconfig.app.json 旁边创建一个新的 tsconfig tsconfig-es5.app.json，内容如下：

{
    "extends": "./tsconfig.json",
    "compilerOptions": {
        "target": "es5" 
    }
}

在 angular.json 的 build 和 serve 目标下添加两个新配置部分，以提供新的 tsconfig（es5 节点，请记住将“yourAppName”更改为您的应用程序名称）。

"build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {
        ...
    },
    "configurations": {
    "production": {
        ...
    },
    "es5": {
        "tsConfig": "./tsconfig.es5.json"
    }
    }
},
"serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
        ...
    },
    "configurations": {
    "production": {
    ...
    },
    "es5": {
        "browserTarget": "yourAppName:build:es5"
    }
    }
},

使用此命令安装 Angular Elements polyfill
```
`ng add @angular/elements `
```
使用以下命令使用此配置运行服务。
```
`ng serve --configuration es5`
```

编辑：

参考this thread，在IE浏览器中，angular元素似乎仍然不支持Shadow DOM。我建议你可以将此问题反馈给Angular forum，并希望他们在IE浏览器中添加对带有Angular元素的Shadow DOM的支持

【讨论】：

当您运行 Angular 9 项目的 --prod 构建时，它会生成 ES5 包。 @angular/elements 不支持 Shadow Dom。仅查看封装仿真。
@moefinley，请检查我的编辑，Angular 元素似乎仍然不支持 IE 浏览器中的 Shadow DOM。建议您可以将此问题反馈给Angular forum。