Advanced Router - Web Components do not render properly in <sc-view>

[itsMattShull]

I'm using web components in the router to display a couple of buttons, such as . On safari and firefox, when I route in the page with those they appear and behave as I expect with all the styles. (Just like you see when you go to this page: example)

If you use chrome to go directly to the page (example) then you'll see it appear and behave normal. BUT, if you go to another page first (like this one) and use the side-nav to go to the buttons page, they don't appear correctly.

Since this is only happening in Chrome and not Safari, FF, etc. could it be a Chrome bug? Maybe to do with how the nodes are being brought in?

[itsMattShull]

I thought that maybe it was due to the fact that I changed new DocumentFragment() to document.createElement('div') but that doesn't appear to make a difference (example on another repo with DocumentFragment()). I explain why I changed DocumentFragment in the first place at #57 in case anyone is curious.

[itsMattShull]

Update: when the sc-view with the web components is called in it's not loading the Shadow DOM.

[itsMattShull]

Created a pull request for the patch: #58

This change allows web components to be rendered using the router by taking the child nodes from newView and using innerHTML to copy the HTML from newView into currentView. This appears to render the HTML which triggers the web component lifecycle callbacks.

It's not the prettiest way of handling it. I spent several hours working on it and towards the end @pmgower and I came up with this. Is there another solution to render the HTML being copied from newView so we don't have to use currentView and innerHTML?

[pmgower]

@derekshull it's always great pair-programming with you. #twoheadsarebetterthanone

[github-polymer-user]

@surma For anyone willing to debug on their own lovely OS X and Safari, just add some browser polyfills:

1. npm install bower && bower install webcompnentsjs (instuctions from http://webcomponents.org/)
2. add <script src="/browser/webcomponents-lite.min.js"></script> to the header section of the header.partial.html file
3. add app.use('/browser',express.static('./app/../bower_components/webcomponentsjs'));
4. add extra -moz-, -webkit-, -o-webkit- CSS animation and/or html5shim.js as needed