Naming convention for turbo_streams target

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">
1 Like