Angular - 自定义元素不适用于 Firefox & Microsoft Edge & Internet Explorer答案

【问题标题】：Angular - Custom Elements not working on Firefox & Microsoft Edge & Internet ExplorerAngular - 自定义元素不适用于 Firefox & Microsoft Edge & Internet Explorer
【发布时间】：2018-10-23 02:23:42
【问题描述】：

我试过这个Angular Elements Demo

我在本地下载、安装并构建了该演示。

然后，使用以下代码：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Angular Elements Demo</title>
</head>
<body>

  <hello-world name="Anna"></hello-world>

  <script src="dist/main.js"></script>
  <script>
      const helloCp = document.querySelector('hello-world');
      helloCp.addEventListener('hi', (data) => {
          console.log(data.detail);
      });
      setTimeout(() => {
        helloCp.setAttribute('name', 'Marc');
      }, 1000);
  </script>

</body>
</html>

然后我尝试Mozilla Firefox，但收到以下错误：

"ReferenceError: customElements is not defined"

另一方面，我尝试了Google Chrome 和!!!它工作正常！！！

也许我需要包含一些 Javascript 文件，例如 polyfill？我尝试了一些在互联网上推荐的方法，但没有成功。

它也不适用于 Microsoft Edge 和 Internet Explorer。

有没有办法让代码在 Firefox 上运行而不调整其默认配置？

我的意思是，在 Firefox 上：about:config

dom.webcomponents.customelements.enabled: true
dom.webcomponents.shadowdom.enabled: true

我尝试添加以下 Javascript 文件：
https://github.com/webcomponents/webcomponentsjs/blob/v1/webcomponents-lite.js

但是没有成功

你知道如何解决这个问题吗？

感谢您的帮助！

【问题讨论】：

标签： javascript angular typescript web-component custom-element

【解决方案1】：

通过删除 encapsulation: ViewEncapsulation.Native，我的自定义元素项目可以在其他浏览器中运行

【讨论】：

这是我这几天找到的唯一答案，可以让它在 Edge 中工作！但仍然不是 IE。

【解决方案2】：

自定义元素是当前支持的 Web 平台功能 Chrome、Opera 和 Safari，并在其他浏览器中通过 polyfills（参见浏览器支持）。

因此，您应该添加 polyfills 以使用 Firefox、~~Edge...~~

Browser support for custom elements

注意：Chrome 和 Opera 默认支持自定义元素。 Firefox 非常接近；它们当前可用，如果您设置偏好 dom.webcomponents.enabled 和 dom.webcomponents.customelements.enabled 到 true。火狐的计划在版本 60/61 中默认启用。到目前为止，Safari 只支持自治的自定义元素，而 Edge 是也在着手实施。

Official Docs.

【讨论】：

是否可以从一些CDN 中为此使用polyfill？还是我必须专门为我的项目生成polyfill？
@davidesp，更新答案，查看Browser support for custom elements参考
是否可以在不调整默认配置的情况下让代码在 Firefox 上运行？我尝试添加以下 Javascript 文件：github.com/webcomponents/webcomponentsjs/blob/v1/…，此处推荐：webcomponents.org/polyfills，但没有成功

【解决方案3】：

Angular 自定义元素不支持 IE。这是自定义 Angular 4+ App Bootstrap 并使其支持 IE 的解决方法。

https://hongbinhb.blogspot.com/2019/02/how-to-deploy-two-or-more-angular-6.html

【讨论】：

虽然这在理论上可以回答这个问题，it would be preferable 在此处包含答案的基本部分，并提供链接以供参考。