Is it possible to use hotwire without the structural elements? Having random form tags and turbo-frame tags in the markup is playing havoc with the styling of the page. I am wondering if there is more of an annotation based approach:
<div data-hw="turbo-frame" data-hw-path="XXXX"and stuff like that could use the existing markup without changing the structure of the HTML.
Thanks
Hey @ogmiosnetworks, not directly, no. You can’t get the benefits of turbo_frame (how links open inside them if the next page has the same frame, etc) just with data attributes.
But one thing you can do is to update elements by id indirectly. And that’s by getting <turbo_stream action="replace" target="<dom_id_of_what_to_replace"> elements to land on your page.
This adds some interaction, and it could all be handled via a turbo_frame that’s not visible on the page. The way this works is that turbo watches the DOM for new and modified elements. One of the elements it watches out for is the <turbo_stream> element. They can have different actions, like append (a child to a parent collection of a certain id), or replace.
It’s useful for managing rows of a table since you can’t wrap <tr>'s with turbo_frame elements.
It’s also useful for updating form sections. See this other thread for updating form sections.
Hope that gives you an extra option!
You could try adding an is=“turbo-frame” attribute to the element you want to be a turbo frame. I haven’t tested this yet but modern browsers except for Safari support the is= attribute and there’s a 1k polyfill available for browsers that don’t. The way the spec is written for it means it should be able to work.