0

I'm trying to enable Polymer web components for Firefox so that I can navigate through my Polymer webpage on Firefox.

I tried these instructions but nothing has changed and it seems like Firefox totally ignores my components.

https://www.designedbyaturtle.co.uk/2015/how-to-enable-web-components-in-firefox-shadow-dom/

I'm also importing the webcomponents.js polyfills in my index.html.

So, what I've done is the following:

I've written the following web component test-firefox.html in the directory elements:

<dom-module name="test-firefox">
  <template>
    <h2>Firefox says hi too!</h2>
  </template>
  <script>
    Polymer({
      is: 'test-firefox'
    });
  </script>
</dom-module>

and this is my index.html file:

<!doctype html>
<html>
  <head>
      <link rel="import" href="webjars/polymer/1.6.1/polymer.html">
      <script src="webjars/webcomponentsjs/0.7.22/webcomponents.js"></script>
      <script src="webjars/webcomponentsjs/0.7.22/webcomponents-lite.min.js"></script>

      <link rel="import" href="elements/test-firefox.html">

  </head>
  <body>
    <h1>Hello Firefox!</h1>
    <test-firefox></test-firefox>
  </body>
</html>`

As you can see, instead of the bower_components, I'm using the corresponding webjars (for Polymer, webcomponents.js, webcomponents-lite.min.js). I've added the dependencies for those in my pom.xml and they are normally installed.

So what I noticed that happens is quite strange:

  • For Google Chrome, everything works perfectly fine.
  • For Mozilla Firefox on Linux, the same.
  • For Mozilla Firefox on Win10, the web component is not getting rendered, it is like the browser totally ignores it.

Any ideas?

Paolo Forgia
  • 6,572
  • 8
  • 46
  • 58
luthien
  • 1,285
  • 3
  • 15
  • 26

1 Answers1

0

Can you rewrite your question?

You don't need to enable anything to get a website working in Firefox (surely you can visit https://www.polymer-project.org/ and it works for you).

If firefox "ignores" your components maybe you are missing imports for those elements.

Check this page https://www.polymer-project.org/1.0/docs/devguide/registering-elements and see how <link rel="import" href="bower_components/polymer/polymer.html"> is used. You also need to import your own components this way for them to work.

Ergo
  • 1,205
  • 9
  • 16
  • Thank you for your answer. I rewrote my question above so that I give a bit more information. What I did not mention before and it is important is that I'm using webjars. If you have any experience/idea on that, I'd be grateful to read. – luthien May 10 '17 at 15:23
  • Sorry I have no experience with webjars. In general your code looks ok - but you should be using just `webcomponents-lite.min.js` - and please remove the internal firefox flag for webcomponents from that article - it might be breaking something in your code. Also please view console for your browser - to see if you don't get some incorrect import paths and 404's. – Ergo May 12 '17 at 21:20