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!
