0

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?

Supersharp
  • 29,002
  • 9
  • 92
  • 134
Subramanian Vignesh
  • 217
  • 2
  • 7

1 Answers1

2

To use, in Firefox, Custom Elements v1 with HTML Imports:

  1. Do not activate Firefox flags as the implementation is outdated.
  2. Install webcomponentsjs (with bower for example), and include in your main file only htmlimports.min.js file.
  3. 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.

Supersharp
  • 29,002
  • 9
  • 92
  • 134
  • I do not see how downloading webcomponentsjs is connected to including *only* `htmlimports.min.js`. When I inspect the package, I don't see any such file? – David Gaskin Aug 29 '18 at 01:05
  • @Peak the version and content of the linked package have evolved since the time the answer was posted. Now you'd better follow this new post: https://stackoverflow.com/q/51939275/4600982 – Supersharp Aug 29 '18 at 07:32