Angular-自定义元素无法在Firefox&微软Edge&IE浏览器 [英] Angular - Custom Elements not working on Firefox & Microsoft Edge & Internet Explorer
问题描述
我在本地下载，安装并构建了该演示.
I downloaded, installed, and built that demo on local.
然后，使用以下代码:
<!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 上运行，但出现以下错误:
Then I tried on Mozilla Firefox but getting the following error:
"ReferenceError: customElements is not defined"
另一方面，我尝试了 Google Chrome 和!!!它正常工作！！！
In the other hand, I tried on Google Chrome and !!! it works properly !!!
也许我需要包含一些Javascript文件，例如 polyfill ?我尝试了其中一些在互联网上推荐的方法，但没有成功.
Maybe I need to include some Javascript file like a polyfill?
I tried some of them recommended on internet with no success.
它在 Microsoft Edge 和 Internet Explorer 上也不起作用.
是否可以在不调整默认配置的情况下使代码在Firefox上运行?
Is there anyway to get the code running on Firefox without tweaking its default configuration?
我的意思是，在Firefox上: about:config
I mean, on Firefox: about:config
dom.webcomponents.customelements.enabled: true
dom.webcomponents.shadowdom.enabled: true
我尝试添加以下Javascript文件:
https://github.com/webcomponents/webcomponentsjs/blob/v1/webcomponents-lite.js
I tried adding the following Javascript file:
https://github.com/webcomponents/webcomponentsjs/blob/v1/webcomponents-lite.js
如此处推荐:
https://www.webcomponents.org/polyfills
但没有成功
关于如何解决此问题的任何想法?
Any idea on how to solve this?
感谢您的帮助！
推荐答案
我通过删除 encapsulation:ViewEncapsulation.Native
这篇关于Angular-自定义元素无法在Firefox&微软Edge&IE浏览器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
