Polymer 1.0 and iron router or flow router

help
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>
21

By the way, as I found out just today, the simplest hello world Meteor project won’t work as expected with the latest Polymer. That means

{{> hello}}

won’t change the click numbers. Meteor could even complain no “hello” template found… Unless you quote it like:

<div>{{> hello}}</div>

Guess it’s due to Polymer & Meteor always compete to write the DOM tree. Polymer somehow changed to break Meteor. There’s no gaurantee if we don’t protect Meteor blocks explicitly.

1 Like
22

What exactly do you mean by project won’t work with latest Polymer ?
What elements in example you changed to polymer counterparts ?

23

I am using boxxa:polymer & boxxa:polymer-paper. They help install latest Polymer stuff to /public/bower_components

My test project worked few days ago, yesterday I copied the project and delete /public/bower_components and let the packages reinstall. When comparing the 2 projects, I noticed some minor version upgrade in the components. Now template quote needs to be wrapped:

<div>{{> hello}}</div>

Otherwise the reactive variables won’t work as before upgrade.

24

I tested your package but…
Using a simple element such “paper-input” or “paper-fab” cause weird errors:

“Uncaught NotFoundError: Failed to execute ‘insertBefore’ on ‘Node’: The node before which the new node is to be inserted is not a child of this node.” at polymer-mini.html:487

“Uncaught TypeError: Illegal invocation” at polymer.html:935

25

Yes the paper-fab button wasn’t working because ShadyDOM couldn’t do its local DOM manipulation properly with Blaze in the way. Could you please try again using v0.4.0?

But you will need to change your bower.json, if you’re using a browser that isn’t Chrome. Please remove the webcomponentjs override in the bower.json.

26

It works now!!! Thanks for this fix !! ; )

27

Hello

After following these instructions, (which worked) I’m still having issues. Looks like CSS files fail to load, which means the HTML doesn’t render correctly. I’ve detailed what’s going on here: https://github.com/loneleeandroo/meteor-polymerize/issues/8 with reproduction steps and a demo link, detailed in the README here : https://github.com/polonski/c9-meteor

Also, I can’t view your demo as it is marked as ‘private’. Can you please make it ‘public’ for us to view?

Many thanks

28

Hi, those warnings are not errors, I’ve read a report on Polymer a few days ago, would be very hard for me to find though. It’s just some internal browser stuff, this doesn’t cause any errors but Chrome/browsers will log it nonetheless. They are aware of this issue but for now they haven’t figured out a solution yet and I don’t think it’s on their urgency list, since it’s not breaking anything (although they are aware this might confused developers and make them waste time on fixing a problem that’s caused by something else).

29

Discussion continued in github here: https://github.com/loneleeandroo/meteor-polymerize/issues/8

30

Let’s continue this discussion on github, no need posting in both place :slight_smile:

31

I could not do walk the loneleeandroo package: polymerize , use this , boxxa : polymer , ecwyne : polymer and all who are in atmosphere.com , but I can not give the result. someone has the solution for Windows meteor ?

32

https://github.com/HedCET/TorrentAlert in this project we used flowrouter with mwcLayout.render() (similar to blazLayout.render()) & mwc:compiler also useful coding polymer with meteor