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
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.
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.
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
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.
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.
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).
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 ?