时间戳

首页 > 解决方案 > Angular - 自定义元素不适用于 Firefox & Microsoft Edge & Internet Explorer

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

问题描述

我试过这个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 Edgeand 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

但没有成功

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

谢谢你的帮助！

标签： javascriptangulartypescriptweb-componentcustom-element

解决方案

我通过删除我的自定义元素项目在其他浏览器中工作encapsulation: ViewEncapsulation.Native

推荐阅读