How do we start using native ES2015 / ES6 Custom Elements with Turbolinks?
As custom elements bring their own life-cycle management we need to make sure
that our components aren’t re-evaluated by Turbolinks on every new page visit.
It’s helpful to facilitate importing and registering our custom elements in their
Turbolinks to leave
elements.js alone and don’t touch it during page transitions:
elements.js looks like this:
In Rails’s default
application.js pack we can then import Turbolinks and start
This relies on Turbolinks being available via npm.
By integrating Turbolinks via npm you still need the gem for some Rails internals,
but you have to disable the automatic
require. Otherwise Rails will try to mangle Turbolinks
By disabling automatic requiring you’re expected to manually include Turbolinks’ redirection
helpers in your
That’s all you need to get Rails to run smoothly with Turbolinks and a npm-/webpack-based
disconnectedCallback() now all perform as expected.