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).
I has posted issues on the Polymer git pages for the related elements.
I am sure they will look at it soon.
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
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…
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.
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
(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
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.
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?
@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…
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 
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
Okay 
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 
. 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
That is great news!! Going to try it too
You could simply make things work like this:
<paper-button raised>
<div>{{buttonText}}</div>
</paper-button>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
What exactly do you mean by project won’t work with latest Polymer ?
What elements in example you changed to polymer counterparts ?
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.
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
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.