Is there a common, or better way to achieve progressive enhancement with Polymer?

Question

I created an issue on one of the Polymer elmenent's github, but I wanted to check if there is already a common approach to the problem I describe? Basically to be able to provide almost instant content, and then when Polymer and it's associated elements has loaded, move the content into the element in order to get the additional bells and whistles the elements provide?

Answer 1

Most of the case I build my "content-switcher" which job is to load and show the contents when the element is ready, until then my CMS is going to put the actual content inside this element, so the browser could render it and with a little css I could imitate like it's a full working.

There is a great example about this, created by Surma and Paul: https://github.com/GoogleChrome/ui-element-samples/tree/gh-pages/server-side-rendering

The concept is that you put the needed content into the DOM and if you can use progressive enhancment or javascript then replace it with your custom element and load the contents with AJAX trough normal links.

Answer 2

The common 'Polymer way' of dealing with the 'white page of loading' or 'flash of unstyled content' is to either:

1. Build a splash screen
2. Use the :unresolved CSS selector to style a dummy version of the element

Both of these are pretty generic, so you might want to build some kind of custom solution if you have special needs.