Any gotcha's or considerations needed for Turbolinks/Turbo?

[swanson]

👋

I was wondering if there are any special considerations or gotcha's with using Catalyst in a Turbolinks/Turbo powered application. Does anyone have experience? Thanks!

[jacob-carlborg-apoex]

I've experimented a bit with Catalyst and Turbo in a Rails application. There are some issues with using a shadow DOM. The issues are not related to Catalyst itself, but it's rather the nature of how shadow DOM works.

Turbo Drive (i.e. navigation) works fine when using a shadow DOM. What doesn't work is Turbo Frame elements, if they're located inside a shadow DOM. If a link in a Turbo Frame is located inside a shadow DOM and is clicked, Turbo won't be able to catch the click event and a regular request is made and the full page is rendered. If the Turbo Frame is instead outside of the shadow DOM but the response contains the Turbo Frame inside a shadow DOM, Turbo is able to catch the click event and remove the initial Turbo Frame but it won't be able to insert the Turbo Frame from the response, because getElementById (or whatever Turbo is using) won't be able to cross the shadow boundary.

[keithamus]

I think @jacob-carlborg-apoex's comment about ShadowDOM is some great insight.

One thing that may happen more as a consequence of Turbo is elements' lifecycle methods are called more frequently. I'm especially thinking about disconnectedCallback. It might surface errors more prominently if you have components which error on disconnectedCallback, that you weren't seeing before because this was happening during a page unload. In addition if you're manually binding events (rather than using actions) and not cleaning them up in the disconnectedCallback, you might start to see errors there, as these elements live beyond a "page" lifetime.

To the best of my knowledge though, there are no problems with Catalyst itself, with respect to Turbo. At GitHub we use a very similar technology to Turbo called PJAX, which works without issue with Catalyst.