Currently, I am facing a challenge in integrating PolymerJs with a Ruby on Rails project that has Turbolinks enabled. The issue arises when I click on a link - the new page loads correctly but my Polymer components do not reinitialize. They appear as if no JavaScript has been executed on them at all.
In my setup, I have loaded the Polymer components and platform in the header, so they do not reload with the 'page changes' (as is the nature of Turbolinks - it only refreshes the body).
To address this issue, I found a workaround which involves manually refreshing specific elements like 'my-custom-element' and 'core-ajax' using the following code snippet:
custom_elements = document.querySelectorAll("my-custom-element, core-ajax ")
for element in custom_elements
element.parentNode.replaceChild(element.cloneNode(), element)
However, I am looking for a more effective and idiomatic solution. I have also attempted to recall the Polymer() function inside the element with no success. It seems to trigger properly, but there is no indication of Polymer attempting to reattach my elements or activate any further activity within the shadowDOM. Additionally, I experimented with preventDispose, but it did not work due to the server loading an entirely new body.
Is there a way to instruct Polymer/Platform to reinitialize all elements on the page? Which events should be triggered for this purpose?
If a full reinitialization is not feasible, how can I specifically initialize a particular Polymer element?