Angular - Custom Elements not working on Firefox & Microsoft Edge & Internet Explorer

问题

I tried this Angular Elements Demo

I downloaded, installed, and built that demo on local.

Then, used the following code:

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

Then I tried on Mozilla Firefox but getting the following error:

"ReferenceError: customElements is not defined"

In the other hand, I tried on Google Chrome and !!! it works properly !!!

Maybe I need to include some Javascript file like a polyfill? I tried some of them recommended on internet with no success.

It also didn't work on Microsoft Edge and Internet Explorer.

Is there anyway to get the code running on Firefox without tweaking its default configuration?

I mean, on Firefox: about:config

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

I tried adding the following Javascript file:
https://github.com/webcomponents/webcomponentsjs/blob/v1/webcomponents-lite.js

as recommended here:
https://www.webcomponents.org/polyfills

but there was no success

Any idea on how to solve this?

Thanks for your help!

回答1:

I got my Custom Elements project to work in other browsers by removing encapsulation: ViewEncapsulation.Native

回答2:

Custom elements are a Web Platform feature currently supported by Chrome, Opera, and Safari, and available in other browsers through polyfills (see Browser Support).

So, you should add polyfills to work with Firefox, ~~Edge...~~

Browser support for custom elements

Note: Custom elements are supported by default in Chrome and Opera. Firefox is very close; they are currently available if you set the preferences dom.webcomponents.enabled and dom.webcomponents.customelements.enabled to true. Firefox's implementation is planned to be enabled by default in version 60/61. Safari so far supports only autonomous custom elements, and Edge is working on an implementation as well.

Official Docs.