Experimented with the Angular Elements Demo
After downloading, installing, and building the demo locally.
Implemented 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>
Encountered an error while testing on Mozilla Firefox:
"ReferenceError: customElements is not defined"
However, the demo worked perfectly on Google Chrome.
Tried various Javascript polyfills as suggested online but none were successful.
The demo also failed to run on Microsoft Edge and Internet Explorer.
Is there a way to make it work on Firefox without changing its default settings?
Such as accessing about:config in Firefox.
dom.webcomponents.customelements.enabled: true dom.webcomponents.shadowdom.enabled: true
Attempted to add this Javascript file:
https://github.com/webcomponents/webcomponentsjs/blob/v1/webcomponents-lite.js
As recommended on:
Unfortunately, still no success. Any suggestions for resolving this issue?
Your assistance is greatly appreciated!