I am trying webcomponents in a sample app. Since some of the specs are not included in some browsers, i tried using polyfill for those. In Mozilla firefox, i tried by enabling the key dom.webcomponents.enabled and adding some polyfills (that are not in browser). I have used HTML Import polyfill from webcomponents.js polyfill.
Still HTMLImport is not working in firefox, internet explorer (even with polyfill). (https://github.com/webcomponents/webcomponentsjs)
I also tried customElements v1 polyfill, not working in internet explorer and firefox. (https://github.com/webcomponents/custom-elements)
Has anybody succeeded in including HTMLimports polyfill with customElements V1 polyfill?
To use, in Firefox, Custom Elements v1 with HTML Imports:
- Do not activate Firefox flags as the implementation is outdated.
- Install webcomponentsjs (with bower for example), and include in your main file only
htmlimports.min.jsfile. - Install custom-elements (from your link) and include in your main file
custom-elements.min.js.
You main page should look like this:
<head>
<script src="htmlimports.min.js"></script>
<script src="custom-elements.min.js"></script>
<link rel="import" href="your-components.html">
</head>
<body>
<your-component></your-component>
NB: for step 3, you can also use document-register-element.
You cannot use Custom Elements v1 class syntax with Internet Explorer directly because class is not implemented. You'll need first to transform the source code with a transpiler like Babel.
Alternately, use a modern version (Edge), or use the prototype syntax.
来源：https://stackoverflow.com/questions/41738748/html-import-webcomponents-polyfill-not-working-in-firefox