Question

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

然后，使用以下代码：

<!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和!!!它运作正常!!!

也许我需要包含一些像polyfill这样的Javascript文件？我试过在互联网上推荐的一些没有成功。

它也不适用于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

如此推荐：
https://www.webcomponents.org/polyfills

但没有成功

关于如何解决这个问题的任何想法？

感谢您的帮助！

Answer 1

自定义元素是目前支持的Web平台功能 Chrome，Opera和Safari，并可在其他浏览器中使用 polyfills（请参阅浏览器支持）。

所以，你应该添加 polyfills 来使用Firefox， ~~Edge ...~~

Browser support for custom elements

注意：Chrome和Opera默认支持自定义元素。 Firefox非常接近;如果你设置它们，它们目前可用偏好dom.webcomponents.enabled和 dom.webcomponents.customelements.enabled 到 true 。 Firefox的计划通过版本60/61 中的默认启用实施。到目前为止，Safari仅支持自主自定义元素，而Edge则支持自定义也致力于实施。

Official Docs.

Answer 2

通过删除encapsulation: ViewEncapsulation.Native

，我的Custom Elements项目可以在其他浏览器中使用

Answer 3

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

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

Angular - 自定义元素不适用于Firefox＆amp; Microsoft Edge＆amp; Internet Explorer

3 个答案: