Does Polymer Work with Electron?


#1

Hello,

I’m new to Electron. Due to the fact that it uses Chromium under the covers, I thought Polymer would be a good choice. Also, since Polymer has full Chrome support, which is also backed by Chromium. I also saw others recommending Polymer in this thread. So, I downloaded the Polymer Starter Kit.

To my surprise, the app did not render correctly in Electron. The starter kit app renders fine in Chrome. However, I attempted to load the starter kit app in Electron, and it did not render properly. This screenshot shows how it rendered:


As you can see, the items in the left column do not appear to be arranged vertically. In addition, the icons in the header are not right-aligned like I would expect.

My first suspicion was that some CSS didn’t get copied over correctly. However, that doesn’t make sense considering the other styles appear. In addition, because it works in Chrome itself, its even more confusing.

I would sincerely appreciate any illumination on this topic. its thrown me for a loop.


Github Electron & Google Polymer? And Other Questions
#2

I thought Polymer would be a good choice

It is! I am succesfully developing an app with electron + polymer (didn’t use the starter kit though). It definitely works.

To my surprise, the app did not render correctly in Electron.

Hard to say why it happens without seeing your actual code. Could you take a look if the console shows any errors?


#3

Unfortunately, there are no errors in the console. However, my code is literally the starter kit. No changes made. That code can be found here.


#4

I’m new to all this too, and I am having trouble with the shadow DOM not being rendered. The :host selector does not work.
But in chromium, same code works fine. There’s definitely something wrong with electron


#5

Have you seen this Issue thread?


#6

not using the devtool does not solve the issue. But maybe I’m misguided
[EDIT]
I’ve found that adding

<script>
   window.Polymer = window.Polymer || {};
   window.Polymer.dom = 'shadow';
</script>

before importing Polymer library, sorts the issue.