Hi guys,
We adopted hotwired a few years ago and started putting a lot of <turbo-frame> elements everywhere inside our app, thinking it was required in order to be the target of a turbo-stream action. However, we just noticed that there is a new section in the docs that says we should not do that anymore:
A Turbo Stream can integrate with any element in the document that can be resolved by an id, attribute or CSS selector(with the exception of
<template>element or<iframe>element content). It is not necessary to change targeted elements into<turbo-frame>elements. If your application utilizes<turbo-frame>elements for the sake of a<turbo-stream>element, change the<turbo-frame>into another built-in element.
I completely agree with this because turbo-frames have side effects on a tags and forms. However, i did enjoy being able to tell that an element had the potential of being dynamically replaced by a stream just by looking at the element type.
So my question is: Is there any guideline, convention or good practice in regards to naming the targets of the turbo-streams? my three ideas that come on top of my mind are
- use custom element types like
<turbo-target id="some_id"> - stick with divs but add a prefix to the ids like
<div id="turbo-some_id"> - use a data attribute like
<div turbo-target="true" id="some_id">