Javascript Angular-自定义元素不适用于Firefox&；微软Edge&；Internet Explorer_Javascript_Angular_Typescript_Web Component_Custom Element

Javascript Angular-自定义元素不适用于Firefox&；微软Edge&；Internet Explorer

javascript angular typescript

Javascript Angular-自定义元素不适用于Firefox&；微软Edge&；Internet Explorer,javascript,angular,typescript,web-component,custom-element,Javascript,Angular,Typescript,Web Component,Custom Element,我试过这个我在本地下载、安装并构建了该演示然后，使用以下代码： <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Angular Elements Demo</title> </head> <body> <hello-world name="Anna"></hello-worl

我试过这个

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

然后，使用以下代码：

<!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>

另一方面，我尝试了

googlechrome

和！！！它工作正常

也许我需要包含一些Javascript文件，比如

polyfill

？我尝试了一些在网上推荐的，但没有成功

它在

MicrosoftEdge

和

InternetExplorer

上也不起作用

在Firefox上运行代码而不调整其默认配置，还有其他方法吗

我的意思是，在Firefox上：

about:config

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

我尝试添加以下Javascript文件：

此处推荐：

但没有成功

有没有办法解决这个问题

谢谢你的帮助

自定义元素是当前受支持的Web平台功能 Chrome、Opera和Safari，并可通过多边形填充（请参见浏览器支持）

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

注意：Chrome和Opera默认支持自定义元素。火狐非常接近；如果设置了首选项dom.webcomponents.enabled和 dom.webcomponents.customelements.enabled到true。Firefox的计划在版本60/61中通过默认启用实施。到目前为止，Safari只支持自治的自定义元素，而Edge是同时也在致力于实现

我通过删除

封装：ViewEncapsulation，让我的自定义元素项目在其他浏览器中工作。本机Angular自定义元素不支持IE。这里有一个解决方案，用于自定义Angular 4+应用程序引导，并使其支持IE
是否可以使用某个CDN
中的polyfill
？或者我是否必须专门为我的项目生成polyfill
，检查浏览器对自定义元素的支持引用是否可以在Firefox上运行代码，而无需调整默认配置？我尝试添加以下Javascript文件：按此处的建议：但没有成功，虽然这可能从理论上回答了这个问题，但在此处包含了答案的基本部分，并提供了供参考的链接。这是我几天来找到的唯一一个可以让它在Edge中工作的答案！但仍然不是。
dom.webcomponents.customelements.enabled: true
dom.webcomponents.shadowdom.enabled: true