Polymer 1.0 and iron router or flow router

help
1

Hi,

I started moving over to Polymer 1.0 coming from 0.5.
What I noticed is that, while using Iron Router, the routing seems to happen before Polymer is done loading.

For other reasons (making polymer 0.5 to work in Safari) I disabled autoRender already in Iron-router and had a polymer-ready listener setup to start the Router on ready.

This polymer-ready is no more, only WebComponentsReady works.

Anyway…the problem I see now in a very simple test is that my paper-icon-item doesnt get rendered correctly when I load a route.
When after load I edit the source Dev Tools in Chrome, and add another paper-icon-item into the source, it renders fine.
This makes me think that iron-router and also flow-router (which I am trying now) renders the template before Polymer is actually ready.

I do not see a way to let Flow Router start rendering when Polymer is ready.
Also, when I catch WebComponentsReady in a reactiveVar which I hook in the window scope (just for testing) and then set a global template helper to return true when this ReactiveVar is true, it does render almost correct…almost.

paper-icon-item
        iron-icon(icon="social:group" item-icon) inbox

Using this structure, the iron-icon should be put inside the content area with select [item-icon[

Polymer template

<template>
    <div id="contentIcon" class="content-icon layout horizontal center">
       <content select="[item-icon]"></content>
   </div>
   <content></content>
</template>

But that doesnt happen, it is not picked up and place in the content area. The icon will look really small:

When I manually add another paper-icon-item into the HTML with Dev Tools, this one renders correct, and also fixes the previous icon

So it looks to be an issue related to Meteor and the Routing.

Anyone a suggestion? Or maybe with a bit longer to implement Polymer 1.0 until more people have tested and maybe some bugfixes have been made?

[edit]

paper-item
    iron-icon(icon="social:group" item-icon)
    span Inbox

This will work for now, but the paper-icon-item really seems to break with Meteor.
When I look at the paper item demo page, they all look great: /components/paper-item/demo/index.html

3 Likes
2

I’m quite not sure how polymer works but team at Differential has done some work with polymer and they build some apps using it.

Here’s a demo: https://github.com/Differential/polymer-demo

3

I am already successfully using Polymer 0.5. However migrating to 1.0 seems to be a bit of a hassle…

4

Have you tried pointing one of the Polymer guys to this post?

1 Like
5

Yes, I posted and issue on github for the paper-icon-item.

6

paging @schnie

Maybe Greg can look at this someday soon… he’s really deep in right now building out http://astronomer.io for us, which doesn’t have any Polymer in it (yet).

7

I has posted issues on the Polymer git pages for the related elements.
I am sure they will look at it soon.

8

I am also working on combining Meteor and Polymer 1.0 right now and experiencing the same issue.
I think the reason for this is that polymer adds some divs to your HTML once it fires. A ‘paper-button’ component for example looks like this in my code:

<paper-button raised>
  {{buttonText}}
</paper-button>

What Polymer makes out of this is the following:

<paper-button role="button" tabindex="0" aria-disabled="false" id="signUp" raised="" class="primary x-scope paper-button-0" pressed="">

  <paper-ripple class="style-scope paper-button" animating="">
    <div id="background" ...></div>
    <div id="waves" ...></div>
  </paper-ripple>
  <paper-material ...>
    Button text here
  </paper-material>
</paper-button>

So the {{buttonText}} got moved into another div - it’s parent is not ‘paper-button’ anymore but ‘paper-material’. This is messing up everything obviously, since Blaze cannot find the right place anymore to update the {{buttonText}}.
I really don’t know if there is a way around this…
The only solution I see is that you would need to tell Blaze where the {{buttonText}} went to.

1 Like
9

So wrap everything in custom elements where we pass arguments to properties 2way binded by polymer stuff ?
In label’s case 1-way, but others…

In case of input, you can directly access “value” prop of polymer input element to change it and seems it react properly.
But, something is building some issue on my site, performance degrade over time.
So this is maybe affecting it wrong way, I was not able to trace that yet…

10

Check if it works on Safari or Firefox. There seems to be an existing bug with iron-icon and Chrome.

Update: I’ve solved the issue by delaying Blaze.render until after WebComponentsReady. See here.

11

Good solution, I also implemented the WebComponentsReady check.
However, I did notice that my layout scaffold broke:

   paper-drawer-panel
        paper-header-panel(drawer)
            paper-toolbar
                div Application
            paper-input#searchInput(label="Search")

            div
                paper-menu
                     paper-item
                        iron-icon(icon="inbox" item-icon)
                        | Inbox


        paper-header-panel(main='')
            paper-toolbar
                paper-icon-button(icon='menu', paper-drawer-toggle='')
                div Title
            div
                +Template.dynamic template=main

1256×1020 49.4 KB

(this should be a fullscreen drawer setup)

This is actually the other issue I noticed, that sometimes the child tags are not rendered within the polymers content area. I noticed this with the icons but now also with my scaffold.
I removed all styling, did not change a thing.
Disable the WebComponentsReady check and scaffold looked good again but icon was missing.
Maybe we just wait for the Polymer team to fix this

12

Maybe just use simple rule - do not touch insides of Polymer element. It lives on its own in shadow/shady DOM so could not care less what you do to the main DOM and it does not expect you to mess with it.

Create your own Polymer element with public methods which you can use to interact with it and fire events which you need to monitor it.

As soon as you use some scaffold you know that these elements are wired together, so breaking them into more templates and changing them can break it.

13

I am not touching the Polymer element for this. Just using their standard paper-drawer-panel and -paper-header and toolbar.
Straight from the docs.
I only mentioned the inner workings because I have build my own components and I know how they operate.

Does tHe code you see above the screenshot looks like ‘mess’ to you?

Do you have constructive feedback that helps solve this issue?

14

@mspi, I think the issue is shady dom vs full shadow dom. Try adding the query param ?dom=shadow to the url, and it will probably look like you are expecting. Alternatively, u can include a script before the webcomponentsjs in your page to set Polymer = {dom: ‘shadow’}, which should do the same thing.

Shady dom requires you to use the methods described here: https://www.polymer-project.org/1.0/docs/devguide/local-dom.html to manipulate the light dom (children). So ideally, we could find a way to use those methods to bridge the gap between blaze (or any other lib) and parent polymer elements. Going look into that for a bit…

15

tried adding the query param, but to no avail.
It looks like a work around for now anyway, we just need Polymer to work fine next to any templating framework.

I noticed Safari renders much better right now (cause it uses the polyfill?) but only first load. When I refresh the page, it builds up the scaffold (paper-drawer etc) really slowly.

For now I moved back to Polymer 0.5 for production, no sense trying to implement version 1.0 when it seems to be having so many issues with Blaze.

I am happy however that the issue is getting much attention around the board. A fix is imminent :slight_smile:

16

Actually I wrote that wrong (couldn’t find where I originally read it) but just came back across it. This is where they talk about setting the dom mode. https://www.polymer-project.org/1.0/docs/devguide/settings.html

17

Yes, found it in the docs too :smile:

18

Okay :smiley: I’ve finally made Polymer render correctly when Blaze re-renders. Apparently, shadyDOM doesn’t work well with Blaze so you need to patch the elements such that tree traversal and mutation apis act like they would under Shadow DOM.

Luckily, the Polymer team has been working on this here: https://github.com/Polymer/polymer/blob/master/src/lib/experimental/patch-dom.html

Including this file will patch up the Polymer.DomApi to work with Blaze :smile:. It is not yet included in the Polymer release because its experimental, but it works.

You can see a demo here: https://polymerize-androo.c9.io/

I’ve implemented this fix in my package: https://github.com/loneleeandroo/meteor-polymerize

UPDATE: Works on Chrome and Safari. Doesn’t work on FireFox yet with iron router.

UPDATE 2: The patch-dom is still experimental and doesn’t work well with every single element. I’ve found its much easier to just use ShadowDOM rather than ShadyDOM. You’ll need the full version of webcomponentjs rather than lite version for all non-Chrome browsers, because they dont have native ShadowDOM support. See https://www.polymer-project.org/1.0/docs/devguide/settings.html

19

That is great news!! Going to try it too

20

You could simply make things work like this:

<paper-button raised>
  <div>{{buttonText}}</div>
</paper-button>